Vue组件间通信

 

 

Vue是最近流行的js框架，组件（component）是它的一大特色，这一节，我们来讲讲组件之间的传值。

　　Vue的组件有两种，一种是通过路由控制，显示此组件的，它没有被其他组件调用的，我们把他叫做父组件；另一种是被其他组件调用，依赖于其他组件的组件，我们称之为子组件。

　　Vue组件传值有三种，父传子、子传父、子传子。由于Vue组件是自育方式，所以父级只能有一个。

　　1.父传子（v-band/props）；

　　父组件向子组件传值需要在父组件通过v-bind绑定数据，绑定之后传入子组件，子组件通过props接收，在子组件里可以调用里面的数据，但是要记住，一定不要在子组件里改父组件传入的值，不然系统会报错。

　　在做项目时，我们经常会用到表格和表单，然而每个表格，每个表单都需要拆成不同的组件，并且需要接收到接口里的数据，此时，就需要父传子的方法，那个接触到ajax，就不在这里细说了。

　　假设现在mounted钩子里用axios接收到的数据被存到了list里：

 

<script>
export default {
    data(){
        return{
            list:[]
        }
    }
}
</script>

　　并且要把数据传给子组件base-table里,取名字为list：

<template>
    <div>
        <base-table v-bind:list="list"><base-table>
    </div>
</template>

　　然后在子组件base-table里通过props接收：

<script>
    export default {
        props: {
            list: {
                type: Array,
                default:function() {
                    return: []
                }
            }
        }
    }
</script>

　　porps接收完数据，就可以在此组件里用表单渲染展示想要的数据了。如果需要修改一条数据，记得千万不要直接去改list里面的东西，可以通过子传父给父组件传入需要修改的内容，在父组件里去赋值，详细请看下面内容。

　　2.子传父（$emit/v-on）；

　　子组件向父组件传值需要事件触发才能传。一个表格，不可能是死的，它应该允许我们增加、删除、修改、查询，就是我们常说的增删改查。修改数据时，通过v-model监听输入框内修改的内容，假设修改表单为form，现在需要通过事件把表单传给父组件：

<script>
export default {
    data(){
        form:{}
    },
    methods:{
        onSaveForm(){
            this.$emit('saveForm',this.form)
        }
    }
}
</stript>

　　当然form里面已经有了数据，通过onSaveForm（）方法把form传给父组件，父组件通过v-on监听saveForm，接收子组件传出来的form：

<template>
    <div>
        <base-table :list="list" @saveForm="saveForm"><base-table>
    </div>
</template>
<script>
export default {
　　methods:{
　　　　saveForm(form){
　　　　　　console.log(form)
　　　　}
　　}
}
</script>

　　在父组件打印form，与子组件传出来的this.form是一样的，说明子组件向父组件传值成功！！！（:是v-band的缩写、@是v-on的缩写）

　　3.子传子($emit/$on)。

　　非父子组件传值需要通过一个仓库传，首先先新建一个js仓库：

 

import Vue from 'vue'

export default new Vue()

　　这个仓库是用来保存和抛出数据的，它存入一个组件的数据，然后再抛给另一个组件。由于这个用的很少，就随便举个例子吧：

<template>
    <div>
        <button @click="aaa">{{but}}</button>
  </div>
</template>

<script>
import bus from '../bus.js'
export default {
　　data(){
　　　　but: '传入数据'
　　　　name: '小白'
　　}，
　　methods:{
　　　　aaa(){
　　　　　　bus.$emit('name',this.name)
　　　　}
　　}
}
</script>

　　这是要传出数据的组件，当点击按钮时，name会被传入到bus.js，接下来是要接收数据的组件：

<template>
　　<div>
　　　　{{name}}
　　</div>
</template>
<script>
import bus from '../bus.js'
export default {
　　data(){
　　　　return {
　　　　　　name: '小黑'
　　　　}
　　},
　　created(){
　　　　bus.$on('name',data =>{
　　　　　　this.name = data
　　　　})
　　}
}
</script>

　　如此一来，就可以用不同的子组件控制另一个子组件。在一个子组件放置的按钮可以控制其他组件的数据，点击按钮时，另一个子组件的数据发生了改面（小黑=>小白）。

　　其实组件传值有一个很方便的方法，那就是Vuex。Vuex是基于Vue框架的一个仓库，任何组件都可以获取里面的数据。Vuex相当于组件传值的外挂，这里就不多说了，想看Vuex的用法，请看下回分解~~~