父组件向子组件传值，以属性传递
父以属性传递：
template:`<div><son :title='xxx'></son></div>`,
子用(props接收)：
template:`<div>父组件传过来的值{{title}}</div>`,props:['title']
子向父组件传值，自定义事件
-
子组件中例如添加点击事件的方法来触发一个自定义事件
-
将需要传的值作为
$emit的第二个参数，该值将作为实参传给响应自定义事件的方法this.$emit（自定义事件名，要传递的参数）
-
在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
总结：
子向父的中间介质是自定义事件，父向子的中间介质是props中的属性
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='../node_modules/vue/dist/vue.js'></script>
</head>
<body>
<div id="app"></div>
<script>
var Son = {
template:`
<div>
接收到父元素的值是:{{title}}
<button @click="sendMsgToFather">向父组件传值</button>
<hr/>
</div>
`,
props:["title"],
data:function(){
return {
xxx:true,
text:"hello"
}
},
methods:{
changexxx:function(){
this.xxx = !this.xxx
},
sendMsgToFather:function(){
// 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
this.$emit('childToFather','这是子组件给父组件的消息')
}
}
}
//
var App = {
components:{
"son":Son,
},
template:`
<div>
注意：v-on:childToFather = 'showChildMsg是监听自定义事件childToFather<br/><br/>
<son :title='xxx' v-on:childToFather = 'showChildMsg'></son>
我是父组件的值：{{xxx}}
</div>
`,
data:function(){
return {xxx:"我是xxx数据"}
},
methods:{
showChildMsg(data){
console.log(data)
this.xxx = data;
}
}
}
new Vue({
el:"#app",
components:{
"app":App
},
template:"<app/>"
})
</script>
</body>
</html>
