vue 父元件與子元件相互通訊

一、父元件給子元件傳值
      props 實現父元件向子元件傳值。
1父元件裡：
<child-pack  :msg ="myMsg" v-on:listenTochildEvent="showMessageFromChild"></child-pack>
msg是繫結的自定義屬性，類似我們原生html 給標籤自定義屬性一樣，Widget是傳輸變數
<script >
import childpack from './childPack.vue' //引用子元件
export default{
  name: 'FatherPack',
  components: { childpack },
  data(){
      return（）{
           myMsg：‘我是父元件引數’
       }
  },
  mothods:{
  }

}
</script>
 
2子元件裡：
<div>
    <span>{{msg}}</span>
</div>
export default {
  name: 'ChildPack',
  props:["msg"]
 //也可以指定預設型別和預設值
 // props: {
 //    msg: {
 //       type: Number,
  //      default: 0
  //    }
 // },

  data(){
  },
  created() {
     console.log（'child_msg',this.msg）
  },
  mothods:{
  },

}

二、子元件傳值到父元件
this.$emit() 實現子元件向父元件傳值。

1在子元件裡:
export default{
    methods: {
          changeFather(){
             this.$emit("listenTochildEvent","我是子元件的引數");
          },
        //可以傳遞引數，引數可以是值、物件、陣列等型別。
        //  changeFather(pms){ 
        //    this.$emit("listenTochildEvent",pms);
       //   },
} } 
 

2在父元件：定義事件listenTochildEvent，並實現showMessageFromChild方法，接收父元件傳遞來的引數。
<child-pack  :msg ="myMsg" v-on:listenTochildEvent="showMessageFromChild"></child-pack>
<script >
import childpack from './childPack.vue' //引用子元件
export default{
  name: 'FatherPack',
  components: { childpack },
  data(){
      return（）{
           myMsg：‘我是父元件引數’
       }
  },
  mothods:{
     showMessageFromChild(data){
        console.log(data);
  }

}
</script>