子组件传递数据给父组件
<body> <div id="box"> <parent></parent> </div> <template id='p'> <div> <h1>父组件~~~~~~{{ a }}</h1> <child1 :val='a' @change='getVal'></child1> </div> </template> <template id='c1'> <div> <h3>child1------{{ b }}~~~~{{ val }}<button @click='fn'>变</button></h3> </div> </template> </body> </html> <script type="text/javascript"> var vm = new Vue({ el:'#box', data: {}, components: { parent: { template: '#p', data: function () { // body... return { a: '爸爸' } }, methods: { getVal: function (msg) { // body... // console.log(msg); this.a = msg; } }, // 逆向传值,vue中不允许,需要我们主动触发 components: { child1: { template: '#c1', data: function () { // body... return { b: '儿子' } }, props: ['val'], //希望得到的值 // 正向传值 vue是允许的 methods: { fn: function () { // body... // console.log(1); // 触发监听 $emit('自定义事件名称',值) // 谁触发,谁接受 this.$emit('change', this.b); } } } } } } }); </script>
兄弟组件间通信
<body> <div id="box"> <child1></child1> <child2></child2> </div> <template id='c1'> <div> <h1>child1-->{{ msg }}<button @click='fn'>传值</button></h1> </div> </template> <template id='c2'> <div> <h3>child2-->{{ msg2 }}</h3> </div> </template> </body> </html> <script type="text/javascript"> /* 同级组件间传值: 需要通过建立中转站(新的vue实例)来传值 同级间传值,需要主动触发 接收监听 实例上的$on方法来接收监听 */ var Hub = new Vue(); // 1) 中转站,其中不需要设置任何参数 var vm = new Vue({ el:'#box', data: {}, components: { child1: { template: '#c1', data: function () { return { msg: '我是哥哥' } }, methods: { fn: function () { // 2) 主动触发监听(中转站触发监听) Hub.$emit('change',this.msg); } } }, child2: { template: '#c2', data: function () { // body... return { msg2: '我是弟弟' } }, // 创建完成 created(){ // 3) 接收监听 $on('事件名称',function(val){}) val是传递过来的值 Hub.$on('change', function (val) { console.log(val); // this.msg2 = val; }); } } } });