Vue组件间传值

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

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

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

处理方式有哪些（what）

1.通过 prop + model

Vue官网 一个组件上的 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)
                }
            }
        }
    }
- 父组件 <drawer v-model="show"></drawer>

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

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

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

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

3.通过消息总线

vm.$emit

vm.$on

<div id="app">
    <c1></c1>
    <c2></c2>
</div>

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

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

   <el-table ref="multipleTable">
   
   this.$refs.multipleTable.clearSelection()