如下所示：
<!DOCTYPE html>
<html>
<head lang="en">
< charset="UTF-8">
< ></ >
</head>
<body>
<div id='app'>
<!--这里的作用是将父组件渲染到页面上-->
<father></father>
</div>
</body>
< src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></ >
< type="text/x-template" id="father">
<div>
<!--这里实现一个双向绑定-->
<!--parentMsg变量必须在data中声明，不然会报错，我就错在这个坑-->
<input v-model="parentMsg">
<br>
<child :my-message="parentMsg"></child>
</div>
</ >
< type="text/x-template" id="child">
<div> {{'父组件传递的数据为：'+ myMessage }} </div>
</ >
< >
Vue.component('father',{
// 这里我直接把template写到前面 标签中了，写在这里一大坨，难看
template:'#father',
data:function(){
return {
parentMsg:''
}
}
});
//在 Vue 中，父子组件的关系可以总结为 props down, events up。
// 父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息
Vue.component('child', {
props: ['myMessage'],//这里的props选项是用来实现父子组件的通信的，传递下来的消息字组件用花括号接住
template: '#child'
});
new Vue({
el:'#app'
})
</ >
</html>
以上这篇vue.js父子组件通信动态绑定的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
继续阅读与本文标签相同的文章
上一篇 :
与亚马逊决战印度新零售，沃尔玛拿下生死一战
-
身体“密码”再升级 你是否听说过汗液识别？
2026-05-18栏目： 教程
-
“公务车辆管理系统”哪家强？
2026-05-18栏目： 教程
-
区块链服务网络正式发布
2026-05-18栏目： 教程
-
团体标准《青少年编程能力等级》第1、2部分正式发布
2026-05-18栏目： 教程
-
【MySQL】逻辑架构
2026-05-18栏目： 教程