& lt; !DOCTYPE html>
& lt; html>
& lt;头lang=癳n”比;
& lt;元charset=皍tf - 8”比;
& lt; title> & lt;/title>
& lt;/head>
& lt; body>
& lt; div id=坝τ贸绦颉痹?
& lt; !——这里的作用是将父组件渲染到页面上——比;
& lt; father> & lt;/father>
& lt;/div>
& lt;/body>
& lt;脚本src=" https://cdn.bootcss.com/vue/2.3.4/vue.js "祝辞& lt;/script>
& lt;脚本type=" text/x-template " id=案盖住痹?
& lt; div>
& lt; !——这里实现一个双向绑定——比;
& lt; !——parentMsg变量必须在数据中声明,不然会报的错,我就错在这个坑——比;
& lt;输入v模型=皃arentMsg”比;
& lt; br>
& lt;孩子:我的信息=" parentMsg "祝辞& lt;/child>
& lt;/div>
& lt;/script>
& lt;脚本type=" text/x-template " id=昂⒆印北?
& lt; div>{{“父组件传递的数据为:”+ myMessage}} & lt;/div>
& lt;/script>
& lt; script>
Vue.component(‘父亲’,{//这里我直接把模板写到前面脚本标签中了,写在这里一大坨,难看
模板:#父亲,
数据:函数(){
返回{
parentMsg:“
｝
｝
});//在Vue中,父子组件的关系可以总结为道具,活动起来。//父组件通过道具向下传递数据给子组件,子组件通过事件给父组件发送消息
Vue.component(‘孩子’,{
道具:[' myMessage ']//这里的道具选项是用来实现父子组件的通信的,传递下来的消息字组件用花括号接住
模板:“#孩子”
});
新Vue ({
埃尔:“#应用”
})
& lt;/script>
& lt;/html>
之前
以上这篇vue.js父子组件通信动态绑定的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
