接收和发送的方法都是在子组建模板标签内写
比如：
<child :parentMsg='pMsg'></child>
<child @child-event='getFromChild'></child>
1、父组件向子组件传值：
//先声明一个父组件
var parent = {
template: "<h1>我是局部父组件{{pMsg}}<child :parentMsg='pMsg'></child></h1>",//父组件通过子组件标签<child></child>绑定:parentMsg='需要传递的数据'
data() {
return {
pMsg: 33
};
},
components: {
Child: child
}
};
//再声明一个子组件（注意实际声明位置是在父组件之前，为了演示方便写在父组件之后）
var child = {
template: "<h3>我是局部子组件{{parentMsg}}</h3>",
props:['parentMsg'], //子组件<child></child>标签内的数据通过props从父组件接收数据
data() {
return {
cMsg: 34
};
}
};
//最后，把父组件放到根元素内（每个组件必须只有一个根元素）
export default {
name: "App",
data: () => {
return {};
},
components: {
Parent: parent
}
};
2、子组件向父组件传值：
- 子组件通过事件传递，父组件通过事件接收
- 子组件：this.$emit('父组件接收的事件方法名',传递的数据)
- 流程：
- 子组件把$emit绑定到事件（click）上 => 点击子组件=> 父组件内的子组件模板<child>进行接收（注意此处接收依然是子模板，与父模板无关）
//子组件：
var child = {
template: "<button @click='emitToParent'>我是局部子组件</button>",
data() {
return {
cMsg: 34
};
},
methods: {
emitToParent:function() {
this.$emit("child-event", "我是子组件传上来的数据");
}
}
};
//父组件：
var parent = {
template:
"<div>我是局部父组件{{pMsg}}<child @child-event='getFromChild'></child></div>", //注意此时接收还是在child模板内接收
data() {
return {
pMsg: 3
};
},
components: {
Child: child
},
methods: {
getFromChild:function(data) {
this.pMsg = data
}
}
};
