vue的props和$emit / 父子組件通信。別看其他人的了，我這個例子清晰，肯定可用的。

props

父級：

父級組件中引用子組件，並將自己data下面的giveChild數據綁定在  giveChildData  傳給子

 <myChild :giveChildData="giveChild">{{isMe}}</myChild>

data(){
  return{
    giveChild:'222'
  }
},

components:{

  myChild
}

 

子級：

通過props接收父級傳來的數據

props:{
      giveChildData:{
         type:String
      }
}

子組件將接收到的數據顯示在自身模板中

<div>{{giveChildData}}</div>

效果：

 

$emit

 子元素上的點擊事件成功后，通過 $emit 將事件和數據發射出去

 <div @click="sendChildData">點我將子的數據傳給父級</div>

data(){
       return{
         childData:111
       }
     },

methods:{
       sendChildData(){
          this.$emit('sendChildData',this.childData)
       }
     }

父級：

父級接收到事件后，走自己的事件 getChildData並進行相關處理、顯示。

<myChild :giveChildData="giveChild" @sendChildData="getChildData"></myChild>
    <div>這是子級傳過來的數據 ——> {{isMe}}</div>

data(){
      return{
        giveChild:'222',
        isMe:''
      }
    },

    methods:{
      getChildData(data){
        this.isMe = data;
      }
    },
    components:{
      myChild
    }

效果：子把自己的childData傳給了父級

覺得OK的話，請點下推薦，謝謝！