Vue2组件之间的传值通信

父子组件

Vue中常见的是父与子组件间的通信，所要用到的关键字段是props和$emit。

props接受父组件传给子组件信息的字段，它的类型：Array | Object;详细解释可以参考https://cn.vuejs.org/v2/api/#props

$emit由子组件触发事件向上传播给父级消息。

示例：

// Parent



// Child

祖孙组件

有时候我们可能会碰到组件间的无限嵌套，这时我们使用props时无法向下无限极传递数据的，我们可以用到provide/inject；provide可以向其子孙组件传递数据，而不关子孙组件的层级有多深，使用inject都可以拿到数据。详细解释可以参考https://cn.vuejs.org/v2/api/#provide-inject

示例：

// Grand


// Parent

provide 和 inject 绑定并不是可响应的。我们可以通过传递祖父级的实例this或着使用observable来使传递的数据是响应的。

// Grand


// Child

使用observable让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。

示例：

// Grand
provide() {
  this.read = Vue.observable({
    msg: ''
  })
  return {
    read: this.read
  };
}复制代码

兄弟组件

同级别组件相互间的通信，我们可以使用EventBus或着Vuex。

简单的EventBus示例：

// Bus.jsimportVuefrom"vue";
exportdefaultnewVue();

// Child
我是子组件一
组件一事件

// ChildOne

我是子组件二

兄弟叫我：{{ msg }}

v-model与sync

v-model是我们用ElementUI常见的表单绑定值方式；可以直接修改子组件修改父组件传入的值，简化了我们组件通信的逻辑。

示例：

// ModelCom

  
// Home

sync修饰符也可以是我们的prop进行双向绑定。

它需要我们在子组件内触发this.$emit('update:prop', val)事件

// ModelCom

...
props: ['value'],
methods: {
  handleChange(e) {
    const value = e.target.value;
    // 触发更新this.$emit('update:value', value);
  }
}

// Home
复制代码

$children与$parent

我们可以在组件中通过当前的实例对象访问到组件的$children和$parent来找到各自组件的父级组件或子级组件实例。

示例：

// Child
我是子组件
来自父组件的msg: {{ msg }}

... // Home 复制代码

通过封装查找组件

通过封装函数来向上或向下派发事件

// emitter.js
function broadcast(componentName, eventName, params) {
    this.$children.forEach(child => {
        const name = child.$options.name;

        if(name === componentName) {
            child.$emit.apply(child, [eventName].concat(params));
        } else {
            broadcast.apply(child, [componentName, eventName].concat([params]));
        }
    });
}
export default {
    methods: {
        dispatch(componentName, eventName, params) {
            let parent = this.$parent || this.$root;
            let name = parent.$options.name;

            while (parent && (!name || name !== componentName)) {
                parent = parent.$parent;

                if (parent) {
                    name = parent.$options.name;
                }
            }
            if (parent) {
                parent.$emit.apply(parent, [eventName].concat(params));
            }
        },
        broadcast(componentName, eventName, params) {
            broadcast.call(this, componentName, eventName, params);
        }
    }
};
复制代码

通过封装函数来查找指定任意组件

// 由一个组件，向上找到最近的指定组件
function findComponentUpward (context, componentName) {
    let parent = context.$parent;
    let name = parent.$options.name;

    while (parent && (!name || [componentName].indexOf(name) < 0)) {
        parent = parent.$parent;
        if (parent) name = parent.$options.name;
    }
    return parent;
}
export { findComponentUpward };

// 由一个组件，向上找到所有的指定组件
function findComponentsUpward (context, componentName) {
    let parents = [];
    const parent = context.$parent;

    if (parent) {
        if (parent.$options.name === componentName) parents.push(parent);
        return parents.concat(findComponentsUpward(parent, componentName));
    } else {
        return [];
    }
}
export { findComponentsUpward };

// 由一个组件，向下找到所有指定的组件
function findComponentsDownward (context, componentName) {
    returncontext.$children.reduce((components, child) => {
        if (child.$options.name === componentName) components.push(child);
        const foundChilds = findComponentsDownward(child, componentName);
        return components.concat(foundChilds);
    }, []);
}
export { findComponentsDownward };

// 由一个组件，找到指定组件的兄弟组件
function findBrothersComponents (context, componentName, exceptMe = true) {
    let res = context.$parent.$children.filter(item => {
        returnitem.$options.name === componentName;
    });
    let index = res.findIndex(item => item._uid === context._uid);
    if (exceptMe) res.splice(index, 1);
    return res;
}
export { findBrothersComponents };