vue2.0--组件通信(非vuex法)

写在前面：

1.父组件的data写法与子组件的data写法不同

//父组件data:{    //对象形式}//子组件data:function(){  return {       //函数形式     }}

2.引用子组件遵循 

• 引入组件
• components里定义使用
• 如果有通信，需要在子组件的props注册

以下实例全部使用以下模板

<div id="app">   //父组件    <p>{{total}}</p>    <mime @increment1="incrementTotal" ref="child" :num-a="total" num-s="total"></mime>    <button type="button" @click="clickref">调用子组件</button></div>//子组件<template id="myInput">    <button @click="add">{{counter}}</button></template><script>    new Vue({        el:'#app',        data :{            total: 0                  },        methods:{            incrementTotal : function(){            },            clickref:function(){            }        },        components:{            'mime' :{                template:'#myInput',                data : function(){                    return{                        counter : 0                    }                },                props:['numA','numS'],                methods:{                    add : function(){                    }                }            }        }    });</script>

 

1.父子通信 之 静态数据

如果只是传单一的字符串 

<mime num-s="total"></mime>....props:['numS'] // numS  为字符串 total

这样子组件的numS一直为total。但这种太不灵活

 

2.父子通信 之 动态数据

父组件的数据将会动态传递给子组件

<input v-model="total"><mime :num-a="total"></mime>....//props:['numA']props:{   numA:[ String , Number ]  //允许字符串 数字}

这时当input输入什么，子组件的numA将会得到什么

 

3.父子通信 之 子调用父

{{total}}<mime @increment="incrementTotal"></mime><template id="myInput">    <button @click="add">{{counter}}</button></template>...<script>....data:{   tatal: 0},methods:{   incrementTotal:function(){       this.total +=1;   }},components:{   data : function(){       return:{          counter : 0       }   },    methods : {        add : function(){             this.counter +=1;             this.$emit('increment'); <span style="color:rgb(0,128,0); line-height:1.5!important">//</span><span style="color:rgb(0,128,0); line-height:1.5!important">子组件通过 $emit触发父组件的方法 increment   还可以传参   this.$emit('increment' ,this.counter);        }   }}</script>

子组件执行add –> 触发$emit –> 触发父组件increment –> 执行 incrementTotal 方法

 

4.父子通信 之 父调用子

<mime ref="child"></mime><button type="button" @click="clickref">调用子组件</button><template id="myInput">    <button @click="add">{{counter}}</button></template>...<script>....methods:{   clickref:function(){          var child = this.$refs.child; //获取子组件实例          child.counter = 45;           //改变子组件数据          child.add(11);                //调用子组件方法 add       }},components:{   data : function(){       return:{          counter : 0       }   },    methods : {        add : function(num){             this.counter +=1;             console.log('接受父组件的值：',num) //num为11        }   }}</script>

通过在子组件上引用ref,从而获得子组件实例，进行相应操作。

 

5.子组件与子组件通信

官网：在简单的场景下，使用一个空的 Vue 实例作为中央事件总线

var bus = new Vue()

// 触发组件 A 中的事件bus.$emit('id-selected', 1)

// 在组件 B 创建的钩子中监听事件bus.$on('id-selected', function (id) {// ...})

但是这样实在太麻烦了，建议使用vuex

出处http://www.cnblogs.com/QRL909109/p/6166209.html