Vue 组件及组件通信

重要：Vue 组件间通信的方式：
Vue 组件间通信主要有 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信。

props/$emit父子组件通信
ref 与 $parent/$children父子组件通信
$attrs/$listeners隔代组件通信
provide/inject隔代组件通信
$emit/$on父子、隔代、兄弟组件通信
Vuex 父子、隔代、兄弟组件通信

链接：https://github.com/yangtao2o/learn/issues/97

一、自定义组件

• 单页面标签（局部组件），只在当前引入页面有效。

子组件为：HaHa.js

单页面标签 App.vue 引入

页面效果

• （全局组件）首页引入的组件子组件的任何地方都可以使用
  效果就是可以达到天下无人不识君。

import Vue from "vue";

import App from "./App";
// 引入
import HaHa from "./components/HaHa";
// 注册
Vue.component("HaHa",HaHa);
new Vue({
    el : "#app",
    render(h){
        return h(App)
    }
});

二、儿子读取父标签属性

父组件：

子组件：

现在看到的是以字符串数组形式列出的 prop：

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

通常可以给每个 prop 指定固定的类型，以确保得到正确的值，props 的对象法:

props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
        type: String,
        required: true
    },
    // 带有默认值的数字
    propD: {
        type: Number,
        default: 100
    },
    // 带有默认值的对象
    propE: {
        type: Object,
        // 对象或数组默认值必须从一个工厂函数获取
        default: function () {
            return { message: 'hello' }
        }
    },
    // 自定义验证函数
    propF: {
        validator: function (value) {
            // 这个值必须匹配下列字符串中的一个
            return ['success', 'warning', 'danger'].indexOf(value) !== -1
        }
    }
}

三、父子标签之间双向通信

依据儿子可以更改父亲传过来的值进行分类的：

1. 对象法

父子之间传递的参数如果不是引用类型，儿子只读，无权改变，但是传入引用类型的标签儿子可以依法改变。这与 react 不同，react 任何情况下不能改变父标签传来的参数。
HaHa.vue 子组件

父子之间的双向通信.gif

Prop 验证 可以为组件传进来的值添加类型判断，当不符合类型的时候给出警告。对自己可能没多大用，但在开发一个会被别人用到的组件时尤其有帮助。

props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    // 单个类型
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
        type: String,
        required: true
    },
    // 带有默认值的数字
    propD: {
        type: Number,
        default: 100
    },
    // 带有默认值的对象
    propE: {
        type: Object,
        // 对象或数组默认值必须从一个工厂函数获取
        default: function() {
            return {
                message: 'hello'
            }
        }
    },
    // 自定义验证函数
    propF: {
        validator: function(value) {
            // 这个值必须匹配下列字符串中的一个
            return ['success', 'warning', 'danger'].indexOf(value) !== -1
        }
    }
}

需要注意的是：** prop 会在一个组件实例创建之前进行验证，Vue 中的 data 触发在 beforeCreate 和 Created之间**

2. 函数法
   HaHa.vue 子组件

父组件App.vue

实时输入.gif

3. 内置函数法
   内置函数方法一共有两种。

• $parent.$emit 发，mounted 生命周期里用 $on 收
  父组件 App.vue

子组件 Haha.vue

$parent.$emit 发，mounted 生命周期里用 $on 收

• 行内监听
  子组件 HaHa.vue 在 methods 里面通过事件发送信息

this.$emit("info",'我是儿子组件发来的信息');

也可以直接：

点我发送

上面两种方法子组件发送的效果是一样的。
父组件 App.vue 通过 @info 直接接收

触发函数的第一个形参就是子组件发送的内容。
另外注意的是监听的时候 dataHaha 函数不能加圆括号，如果加的话必须这样写：

如果这样写的话，还可以在加点东西：

负载的额外参数

四、兄弟标签之间的通信

兄弟标签之间的通信借用第三方，对这个第三方的要求很简单，保证借用它的标签的数据能实时更新，满足这个的只有 Vue 实例，完成这个过程的就是江湖人称的 bus。

1. 中介者法
   现在我们需要 HaHa 和 XiXi 之间进行通信，这时的有一个第三方来完成，我们新建一个 bus.js 看清是 JS 文件，输入：

import Vue from "vue";

export default new Vue({
    data : {
        a : 100
    },
    methods : {
        add(){
            this.a++;
        }
    }
})

bus.js 文件定义了一个方法，并设置了一个参数。

接下来以 HaHa.vue 文件为例子：

里面的 computed 是用来接收的，指定接受的 a 函数，就是用来插入的，也可以用 methods 来接收但是插进入的方法就变了，必须的这样写 {{a()}} 。切记不能用 data 来接收。

在 XIXi 里面同样引入。得出如下结果：

bus.gif

2. 原型法通信
   打开 main.js ，让暴露出来的 bus 绑定在 Vue 的身上。

import Vue from "vue";

import App from "./App";

import bus from "./components/bus.js"
Vue.prototype.$bus = bus;
new Vue({
    el : "#app",
    render(h){
        return h(App)
    }
});

这时就可以在任意子文件下访问了。其实就是给 Vue 绑定了一个原型对象。

3. 插件法
   插件法基本思想还是原型法，只不过是使用插件进行引用的。子文件夹里面进行使用和原型法的使用是一模一样的。

我们打开 main.js 修改：

import Vue from "vue";

import App from "./App";

import bus from "./components/bus.js"
// use 使用插件
Vue.use(bus);
new Vue({
    el : "#app",
    render(h){
        return h(App)
    }
});

这时的进入 bus.js 修改使用方法了。

import Vue from "vue";

export default {
    install(Vue){
        Vue.prototype.$bus = new Vue({
            data : {
                a : 100
            },
            methods : {
                add(){
                    this.a++;
                }
            }
        })
    }
}

Vue.use() 里面是个对象，对象必须有 install 方法，这个方法的参数由系统提供 Vue，不过仔细看思想是不是和原型法一模一样只不过，使用插件引用 的方法进行原型绑定的。