自我总结篇之vue的组件通信（父传子 子传父）

一：父传子

父组件代码如下：

<template>
    <div class="father">
   <child :message='message' :message2='message2'></child>
</div>
</template>
<script>
import child from '@/components/child.vue'
export default {
    components:{
     child
    },
    data(){
  return{
      message: '我是来自父组件的第一条message',
      message2:'我是来自父组件的第二条message'
  }
    }
}
</script>

子组件代码如下：

<template>
    <div class="child">{{message}}<br/>{{message2}}</div>
</template>
<script>
export default {
   props:['message','message2']
}
</script>

运行结果如下图：

二：子传父

子组件代码如下：

<template>
    <div class="child" >
    <button @click="sendMsgToParent">点击开始传值</button>

    </div>
</template>
<script>
export default {
   data(){
       return{
       }
   },
   methods:{
       sendMsgToParent(){
     this.$emit('listenMsg','我是来自子组件的message')
       }
   }
}
</script>

父组件代码如下：

<template>
    <div class="father">
        {{msg}}
   <child v-on:listenMsg="showMsg"></child>
</div>
</template>
<script>
import child from '@/components/child.vue'
export default {
    components:{
     child
    },
    data(){
  return{
      msg:'我是来自父组件的msg'
  }
    },
    methods:{
        showMsg(data){
           this.msg = data
        }
    }
}
</script>

运行结果如下：

点击按钮后，运行结果如下：