组件通信：
子组件要想拿到父组件数据 props 子组件不允许直接给父级的数据, 赋值操作如果想更改，父组件每次穿一个对象给子组件， 对象之间引用。例子：
<script> window.οnlοad=function(){ new Vue({ el:'#box', data:{ giveData:{ a:'我是父组件数据' } }, components:{ 'child-com':{ props:['msg'], template:'#child', methods:{ change(){ this.msg.a='被改了'; } } } } }); }; </script> <template id="child"> <div> <span>我是子组件</span> <input type="button" value="按钮" @click="change"> <strong>{ {msg.a}}</strong> </div> </template><div id="box">
父级: ->{ {giveData.a}} <br> <child-com :msg="giveData"></child-com> </div> 例子：自定义事件
<script>
//准备一个空的实例对象 var Event=new Vue();var A={
template:` <div> <span>我是A组件</span> -> { {a}} <input type="button" value="把A数据给C" @click="send"> </div> ` , methods:{ send(){ Event.$emit('a-msg',this.a); } }, data(){ return { a:'我是a数据' } } }; var B={ template:` <div> <span>我是B组件</span> -> { {a}} <input type="button" value="把B数据给C" @click="send"> </div> `, methods:{ send(){ Event.$emit('b-msg',this.a); } }, data(){ return { a:'我是b数据' } } }; var C={ template:` <div> <h3>我是C组件</h3> <span>接收过来的A的数据为: { {a}}</span> <br> <span>接收过来的B的数据为: { {b}}</span> </div> `, data(){ return { a:'', b:'' } }, mounted(){ //var _this=this; //接收A组件的数据 Event.$on('a-msg',function(a){ this.a=a; }.bind(this));//接收B组件的数据
Event.$on('b-msg',function(a){ this.b=a; }.bind(this)); } }; window.οnlοad=function(){ new Vue({ el:'#box', components:{ 'com-a':A, 'com-b':B, 'com-c':C } }); }; </script><body>
<div id="box"> <com-a></com-a> <com-b></com-b> <com-c></com-c> </div></body>