vue.js父子组件通信动态绑定的实例

2019-11-19 12:49:39

字体：大中小

来源：转载

供稿：网友

如下所示：

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title></title></head><body><div id='app'>  <!--这里的作用是将父组件渲染到页面上-->  <father></father></div></body><script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script><script type="text/x-template" id="father">  <div>    <!--这里实现一个双向绑定-->    <!--parentMsg变量必须在data中声明，不然会报错，我就错在这个坑-->    <input v-model="parentMsg">    <br>    <child :my-message="parentMsg"></child>  </div></script><script type="text/x-template" id="child">  <div> {{'父组件传递的数据为：'+ myMessage }} </div></script><script>  Vue.component('father',{//    这里我直接把template写到前面script标签中了，写在这里一大坨，难看    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'  })</script></html>

以上这篇vue.js父子组件通信动态绑定的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：js隐式转换的知识实例讲解

下一篇：解决webpack+Vue引入iView找不到字体文件的问题