頁面效果

props傳值.png

子組件給父組件通信

子組件===》父組件

需要用到自定義時(shí)間，父組件用$on監(jiān)聽自定義事件，$emit觸發(fā)父組件所關(guān)心的自定義事件。

1、在子組件中定義事件內(nèi)容

2、父組件中v-on自定義事件進(jìn)行接收v-on:receive="changeValue"

3、在觸發(fā)子組件事件的時(shí)候，$emit 通知父組件 this.$emit("receive",item);

4、父組件根據(jù)自定義事件進(jìn)行相應(yīng)反饋changeValue:function(value){this.val = value;}

看如下案例，點(diǎn)擊input的時(shí)候，出現(xiàn)下拉列表框，選中相應(yīng)的列表，列表內(nèi)容出現(xiàn)在input框中。

  
    
自定義下拉框
    
    
  
  
  
  // 全局注冊(cè)組件
  Vue.component('cus-list',{
    data(){
      return {
        selectShow:false,
        val:''
      }
    },
    props:['selectValue','list'],
    template:`
      

        

          

            
            
          
          
        
      
    `,
    methods:{
      changeValue:function(value){
        this.val = value;
      }
    }
  })
  Vue.component('list-li',{
    props:['list'],
    template:`
        

          {{item}}
        
    `,
    methods:{
      clickLi:function(item){
        this.$emit("receive",item);
      }
    }
  })
  new Vue({
    el:"#app",
    data:{
      list1:['宋仲基','余文樂','鹿晗','陳小春','黃曉明','易烊千璽']
    }
  })
  

組件最基本的應(yīng)用就是如此，深入的應(yīng)用，就會(huì)發(fā)現(xiàn)很多剛好玩的東西。

關(guān)于“Vue組件及父子組件通信的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。