【VUE】VUE组件间数据传递的总结与思考

背景

• vue组件数据通信是比较重要的，理清楚方法后基本使用起来没啥问题了。
• 由于方法特别多，所以需要好好整理一下，在合适的场景采取合适的方法才是最重要的。

准备工作

• 迅速测试父子组件就弄个App.vue和child.vue

App.vue

<template>
    <div>
        <mychild></mychild>
    </div>
</template>
<script>
import child from './child'
export default {
    components:{
        'mychild':child
    }
}
</script>

child.vue

<template>
    <div>i am child</div>
</template>
<script>
export default {
    
}
</script>

• 如果页面能显示i am child即可成功。

父组件方法或者属性传递给子组件

一、常规方法

• 父组件使用data，在子组件上直接绑属性，子组件通过props获取。

父组件

<template>
    <div>
        <mychild :n='num'></mychild>
    </div>
</template>
<script>
import child from './child'
export default {
    components:{
        'mychild':child
    },
    data(){
        return {num:100}
    }
}
</script>

子组件

<template>
    <div>i am child{{n}}</div>
</template>
<script>
export default {
    props:{
        n:{
            type:Number
        }
    }
}
</script>

• 这种是很常见做法，父组件上通过冒号表示里面传的是data里的值，子组件通过props接收。
• 这个做法有个的缺点，就是传来的值叫啥名得去看父组件上绑的写的是啥。而且也只能传一层。

二、$attrs与$listeners方式

• 使用$attrs和$listeners进行传递。

父组件

<template>
    <div>
        <mychild :num="num" :father="father"  @mouseup="mouseup" @click="myclick"></mychild>
    </div>
</template>
<script>
import child from './child'
export default {
    components:{
        'mychild':child
    },
    data(){
        return {num:100,father:'xcz'}
    },
    methods:{
        mouseup(){
            console.log('mouseup');
        },
        myclick(){
            console.log('myclick');
        }
    }
}
</script>

子组件

<template>
    <div>i am child
        {{$attrs}}
      <grandson v-bind="$attrs" v-on="$listeners"></grandson>
    </div>
</template>
<script>
import grandson from './grandson'
export default {
    //inheritAttrs:false,//这个配置可以不继承除了class的所有属性
    components:{
        grandson
    },
    // props:{//$attrs 默认会拿到除了props,class,style外所有属性
    //     father:{
    //         type:String
    //     }
    // }
}
</script>

孙组件

<template>
    <div>grandson  
      {{$attrs}}
       <button @mouseup="$listeners.mouseup" @click="$listeners.click">xczsad</button>
    </div>
</template>
<script>
export default {
    mounted(){
        console.log(this.$listeners);
    }
}
</script>

• 这个方法有几个地方需要注意：
• 多层传递时，每层需要用v-bind和v-on进行传递，注意没有冒号。
• $attrs有个特性，就是如果中间哪个组件props里接了哪个属性，那么这个值就不会向下传递了。
• $listeners有个特性，它不会去获取绑定的原生属性，也就是事件名.native=xxxx。

三、多层传递给子组件

• 上面二种方法一级级往下传也是可以的，但是如果层级多了那就一团混乱了，有下面方法可以实现多层传递给子组件。

第一种方法

• 暴力解决，使用this.$children[0]然后查找到孙组件，直接挂属性等于想要的值或者方法。缺点就是需要知道是第几个孩子，层级多找的累。

第二种方法

• 直接在原型上写个公共方法。注意这个是借用了子组件传递给父组件要绑on和emit的原理，实现父亲调用孙子的方法。

Vue.prototype.$broadcast = function (eventName,value) {
    let children = this.$children
    function broad(children) {
        children.forEach(child => {
            child.$emit(eventName,value)
            if(child.$children){
                broad(child.$children)
            }
        });
    }
    broad(children)
}

• 这个方法缺点很明显，它会触发所有子组件绑了相同名字的方法。另外需要注意的是层级问题，虽然是触发的绑在孙组件上的事件，但实际这个监听方法是由其父组件绑的。如果没懂就看下面的子组件传递给父组件第一种常规方法的解读。

第三种方法

• 使用provide与inject

父组件

<template>
    <div>
        <mychild></mychild>
    </div>
</template>
<script>
import child from './child'
export default {
    components:{
        'mychild':child
    },
    provide(){
        return {vmApp:this}
    },
    methods:{
        say(){
            console.log('say');
        }
    }
}
</script>

孙组件

<template>
    <div>grandson  
    </div>
</template>
<script>
export default {
    inject:['vmApp'],
    mounted(){
        console.log(this.vmApp);
    }
}
</script>

• 这个使用方法非常暴力，哪里要用直接inject注入就可以了，但这个不推荐使用，其实跟第二种方法有点像，本质是递归往上看父组件哪里有provide，和react的context差不多。
• 这个递归查找有个特性，如果找到了就停止，不会往上继续查找。

第四种方法

• 另外建一个vue实例，在其上面绑定方法和触发方法。俗称eventBus方法。
  Vue.prototype.$bus = new Vue()
• 使用就是随便哪个组件去调用它，this.$bus.on('name',callback)，然后随便哪个组件去触发它this.$bus.emit('name',value)
• 使用这个方法一定要注意组件之间的加载顺序，如果还没on上事件，就emit，肯定触发不了。
• 我们也可以仿照这个原理自己写一个：

Vue.prototype.$bus = {
    obj:{},
    on(name,fn){
        this.obj[name]=fn
    },
    emit(name){
        this.obj[name]()
    }
}

• 实测也是ok的。这样比直接弄个vue实例上去小多了。

子组件方法或属性传递给父组件

一、常规方法

• 由于vue是单向数据流，所以子组件要想改变值，只能是父组件传给子组件来进行改变，但是子组件中可以用个emit来触发父组件的方法。相当于调用vm.on来绑个事件，然后emit进行监听。

父组件

<template>
    <div>
        <mychild :n='num' @sonChangeNum='changeNum'></mychild>
    </div>
</template>
<script>
import child from './child'
export default {
    components:{
        'mychild':child
    },
    data(){
        return {num:100}
    },
    methods:{
        changeNum(value){
            this.num=value
        }
    }
}
</script>

子组件

<template>
    <div>i am child{{n}}
        <button @click="change">xxx</button>
    </div>
</template>
<script>
export default {
    props:{
        n:{
            type:Number
        }
    },
    methods:{
        change(){
            this.$emit('sonChangeNum',200)
        }
    }
}
</script>

• 上面例子就相当于父组件在它自己身上写个changeNum方法，绑到子组件的过程相当于在子组件上on这个方法，push到子组件的一个容器里，容器里有标记’sonChangeNum’。然后子组件进行emit，找到标记，就会执行这个方法，父组件从而收到消息。

const vm = {
    arr:[],
    on(fn){
        this.arr.push(fn)
    },
    emit(){
        this.arr.forEach(fn => fn());
    }
}

• 这个方法缺点也很明显。你需要在父组件上写个回调方法等待子组件传值，父组件上on这个方法（在子组件绑定事件），然后去子组件上emit，子组件emit的这个方法同样还要去看父组件绑的名字到底是啥，而且还只能传一层。
• 这个绑定的源码在vue的event.js里，原理跟上面的比就是容器不是数组。它是把父组件的方法放到_event[key]=value中，让key等于方法名，然后emit的时候，把_event对应的value（数组）执行即可。
• 想验证的只要在子组件里console.log(_event)就明白了。

二、语法糖方法

• 应该是觉得一里面的绑定有点繁琐，所以出现了几种语法糖写法。本质还是一的方法。
• 首先，我们把常规方法里面绑定换个名字：

父组件

<template>
    <div>
        <mychild  :count="num" @update:count="newVal=>num=newVal"></mychild>
    </div>
</template>
<script>
import child from './child'
export default {
    components:{
        'mychild':child
    },
    data(){
        return {num:100}
    }
}
</script>

子组件

<template>
    <div>i am child
        <button @click="sonClick">xxxx</button>
       {{count}}
    </div>
</template>
<script>
export default {
    props:{
        count:{
            type:Number,
            default:0
        }
    },
    methods:{
        sonClick(){
            this.$emit('update:count',220)
        }
    }
}
</script>

• 这样在点击时候和常规方法效果一样，然后我们把名字进行简写。把mychild标签改成：<mychild :count.sync="num" ></mychild>
• 这样效果也是一样的，也就是说，这个简写，他把子组件要传递的值做成count，绑定事件做成update:count，也就是说省去了绑定事件的命名，传的是什么值，那么事件就是update:什么值。
• 我们可以再把这个名字改一下，把绑的事件名字叫input，子组件收到的值叫value，子组件标签：<mychild :value="num" @input="newVal=>num=newVal" ></mychild>，把子组件对应的props改value，emit事件改input，这样效果也是一样的。于是这个简写就是v-model，就等于子组件标签为：<mychild v-model="num" ></mychild>。相当于绑定事件为input定死，给子组件传的值定死叫value，只要父组件传个值，子组件用value收，要改动就emit input事件即可。当然也有方法可以改v-model的传递值和事件名。只要在子组件中配置model即可。这个配置就比较人性化，子组件绑的东西就在子组件上配，父组件的东西在父组件上弄就行了。
• v-model的方法跟上面sync简写方法比，sync简写可以传多个，v-model在子组件上只能传一个。

<template>
    <div>i am child
        <button @click="sonClick">xxxx</button>
       {{xxx}}
    </div>
</template>
<script>
export default {
    model:{
        prop:'xxx',
        event:'yyy'
    },
    props:{
        xxx:{
            type:Number,
            default:0
        }
    },
    methods:{
        sonClick(){
            this.$emit('yyy',220)
        }
    }
}
</script>

三、ref方法

• ref可以拿到子组件的实例，从而使父组件调用子组件的方法。

父组件

<template>
    <div>
        <mychild ref="aaa"></mychild>
    </div>
</template>
<script>
import child from './child'
export default {
    components:{
        'mychild':child
    },
    mounted(){
        this.$refs.aaa.say();
    }
}
</script>

子组件

<template>
    <div>i am child
        
    </div>
</template>
<script>
export default {
    methods:{
        say(){
            console.log('say');
        }
    }
}
</script>

• 这个方法要注意拿的是时候ref有个s，相当于拿子组件实例。
• 这个方法如果拿多层就得一层层ref，然后this.refs.aaa.refs.bbb....
• 这个方法不能重名，会覆盖，两个同名的只能取一个。

四、多层传递给父组件

• 由于上面的方法只能一层层传，如果是孙组件需要传给父组件就变得特别麻烦，当然一级一级触发也是可以完成的。

第一种方法

• 首先，可以通过层级关系搞定，一般组件层数不多的话，在孙组件使用this.$parent来找到子组件实例进而触发父组件。
• 这种方法缺点很明显，层级如果太多的话，那就写成了this.$parent.$parent.$parent...... 。

第二种方法

• 可以写一个公共逻辑，直接全部触发。

Vue.prototype.$dispatch=function (eventName,value) {
    let parent = this
    while(parent){
        parent.$emit(eventName,value)
        parent = parent.$parent
    }
}

• 这样就直接顺着往上全找一遍，只要有绑这个名字的事件全部触发。
• 缺点也很明显，你得把所有事件名字起的不一样。并且你触发的名字也得去父组件上看绑的是啥。

第三种方法

• 这个方法跟上面多层父传子的方法里第四种一样，使用另一个vue实例，俗称eventBus。

思考

• 可以看见上面方法那么多，每个都可能有些缺点，所以才出现了vuex，关于vuex，下次整理一下再写出来。
• 总结这个目的主要还是为了在合适的地方用合适的方法。