小白入场自叙(背景)：组件间值传递的文件网上已经一大堆了，做为小白的我还要编写一篇有‘耍大刀’的嫌疑。 但其实第一:想巩固一下自己的知识链，第二:想养成分享技术文章的习惯。为前端生态添砖加瓦。

为什么要处理这个问题（why）

• Vue最大的优势就是数据双向绑定和组件化，SPA模块化开发必然会遇到组件间值传递数据共享的问题。

处理方式有哪些（what）

1.通过 prop + model

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突

- drawer.vue 子组件    export default {        name: 'drawer',        props: {            value: {                type: Boolean,                default: false            }        },        methods: {            close () {                    this.$emit('input', false)                }            }        }    }- 父组件 
    复制代码

• 上面代码简单又简洁的实现了父组件与子组件的双向绑定，依托双向绑定方式就可实现子组件到子组件，子组件到父组件等。

2.引入Vuex 通过共享数据处理

通过操作组件对象与store对象绑定实现多个组件间数据传值

watch:{            tableCheckd(val){                this.$store.commit('changeShareCheckd', val)            },            '$store.state.shareCheckd': function(val){                this.tableCheckd = val            }        },复制代码

3.通过消息总线

    
    
         
     
    
复制代码

var Bus = new Vue(); //为了方便将Bus（空vue）定义在一个组件中，在实际的运用中一般会新建一Bus.jsVue.component('c1',{ //这里已全局组件为例，同样，单文件组件和局部组件也同样适用template:'
    
     {
    {msg}}
    
',  data: () => ({    msg: 'Hello World!'  }),  created() {    Bus.$on('setMsg', content => {       this.msg = content;    });  }});Vue.component('c2',{  template: 'Say Hi',  methods: {    sendEvent() {      Bus.$emit('setMsg', 'Hi Vue!');    }  }});var app= new Vue({    el:'#app'})复制代码

4.通过 vm.data、vm.refs 直接操作对应组件值

    
           this.$refs.multipleTable.clearSelection()复制代码