史上最全的vue中组件之间的传值方式

重中之重的就是组件之间数据传递的几种方式
Vue2最常见的11种组件间的通讯方式

1. props
2. $emit / v-on
3. .sync
4. v-model
5. ref（获取子组件的属性和调用子组件方法）本质就是获取到子组件的this
6. $children / $parent（获取子组件（不包括顺孙组件）的数组 / 获取父组件的this）
7. $attrs / $listeners（$attrs子组件里面获取父组件传递的属性，$listeners子组件获取父组件自定义的方法（这个自定义方法是子组件通过$emit传递过去的））
8. provide / inject
9. EventBus
10. Vuex
11. $root（获取根组件的，new Vue里面定义的方法和属性）
12. Slot
13. 发布订阅（pubsub-js）

14. 本地存储（localstorage和sessionstorage）
    props
    父组件向子组件传送数据，这应该是最常用的方式了
    子组件接收到数据之后，不能直接修改父组件的数据。
    否则会报错，因为当父组件重新渲染时，数据会被覆盖。如果只在子组件内要修改的话推荐使用 computed
    // Parent.vue 传送
    
    // Child.vue 接收
    export default {
    // 写法一 用数组接收
    props:['msg'],
    // 写法二 用对象接收，可以限定接收的数据类型、设置默认值、验证等 props:{
    msg:{

       type:String,
       default:'这是默认数据'

    }
    },
    mounted(){
    console.log(this.msg)
    },
    }
    .sync 子组件可以修改父组件内容
    .sync可以帮我们实现父组件向子组件传递的数据的双向绑定，所以子组件接收到数据后可以直接修改，并且会同时修改父组件的数据
    // Parent.vue
    
    
    v-model
    和 .sync 类似，可以实现将父组件传给子组件的数据为双向绑定，子组件通过 $emit 修改父组件的数据
    // Parent.vue
    
    
    ref
    ref 如果在普通的DOM元素上，引用指向的就是该DOM元素;
    如果在子组件上，引用的指向就是子组件实例;
    父组件可以通过 ref 主动获取子组件的属性或者调用子组件的方法
    // Child.vue
    export default {
    data(){

     return {
         name:"oldCode"
     }

    },
    methods:{

     someMethod(msg){
         console.log(msg)
     }

    }
    }
    // Parent.vue
    
    
    $emit / v-on
    子组件通过派发事件的方式给父组件数据，或者触发父组件更新等操作
    // Child.vue 派发
    export default {
    data(){
    return { msg: "这是发给父组件的信息" }
    },
    methods: {
    handleClick(){

       this.$emit("sendMsg",this.msg)

    }
    },
    }// Parent.vue 响应
    
    export default {
    methods:{

     getChildMsg(msg){
         console.log(msg) // 这是父组件接收到的消息        }

    }
    }
    $attrs / $listeners
    多层嵌套组件传递数据时，如果只是传递数据，而不做中间处理的话就可以用这个，比如父组件向孙子组件传递数据时
    $attrs：包含父作用域里除 class 和 style 除外的非 props 属性集合。通过 this.$attrs 获取父作用域中所有符合条件的属性集合，然后还要继续传给子组件内部的其他组件，就可以通过 v-bind="$attrs"
    $listeners：包含父作用域里 .native 除外的监听事件集合。如果还要继续传给子组件内部的其他组件，就可以通过 v-on="$linteners"使用方式是相同的
    // Parent.vue