子组件向父组件传值

<template>

<div>

<h2>父组件部分</h2>

// 3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

<Hi1 v-bind:msg="pathermessage" v-on:listenToChildEvent='showMsgFromChild'></Hi1>

</div>

</template>

<script>

import Hi1 from './Hi1'

export default {

data(){

return{

pathermessage:'I am father'

}

},

methods:{

showMsgFromChild:function(data){

console.log(data)

}

},

components:{

Hi1

}

}

</script>

<template>

<div>

<h2>子组件部分</h2>

{{msg}}

//1.在子组件中创建一个按钮，给按钮绑定一个点击事件

<button v-on:click="sendToFather">click sendToFather</button>

</div>

</template>

<script>

export default {

props:['msg'],

methods:{

// 2.在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数

sendToFather:function(){

this.$emit('listenToChildEvent',' I am child send to father')

}

}

}

</script>

总结一下：

• 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
• 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
• 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了