頁面效果

props傳值.png

子組件給父組件通信

子組件===》父組件

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

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

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

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

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

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

  
    
自定義下拉框
    
    
  
  
  
  // 全局注冊組件
  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)用，就會發(fā)現(xiàn)很多剛好玩的東西。

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。