msg: '子级消息'
};
},
methods: {
sendToParent() {
// 子组件只管发送消息，其中cus-event为自定义事件名（事件名不能写成驼峰法,多个单词用-连接），this.msg为要传递的参数。
this.$emit('cus-event', this.msg);
},
getMsg(str) {
console.log('子级组件收到父级的内容', str);
}
}
};
// 注意: .$mount('#app')跟实例内部el: '#app'是等价的
new Vue({
data: {
msg: '',
szStr:'父级消息'
},
components: {
child
},
methods: {
doAction(e) {
console.log(this);
console.log(e);
this.msg = e;
},
useChild(str) {
// 调用子组件的方法
// console.log(this);
// console.log(this.$refs);
// this.$refs.child1得到的子组件实例
this.$refs.child1.getMsg(str);
}
}
}).$mount('#app');
</script>
效果图
总结
以上所述是小编给大家介绍的Vue子组件向父组件通信与父组件调用子组件中的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
