VUE.js组件通信精髓归纳（基础篇）

前言
文章涉及的内容可能不全面，但量很多，需要慢慢看。我花了很长的时间整理，用心分享心得，希望对大家有所帮助。但是难免会有打字的错误或理解的错误点，希望发现的可以邮箱告诉我1163675970@qq.com，我会及时的进行修改，只希望对你有所帮助，谢谢。

vue 何为组件化？
我们可以很直观的将一个复杂的页面分割成若干个独立组件

每个组件包含自己的逻辑和样式再将这些独立组件组合完成一个复杂的页面。

将页面中重复的的功能抽离出来封装成一个单独的组件，在任何需要的地方使用该组件即可；

这样既减少了 逻辑复杂度 , 提高代码的可复用程度和可维护性；

页面是组件的容器,组件自由组合形成完整的界面,当不需要某个组件时,或者想要替换某个组件时,可以随时进 行替换和删除,而不影响整个应用的运行。

每个组件都是一个 Vue 的实例，那么这个组件也有自己的生命周期，并且也有 data、computed、methods、watch这些属性，每个组件都有自己私有的数据；还可以接受来自上层组件传入的数据；

组件化开发的好处
提高开发效率
方便可复用性
便于协同开发
更容易被管理和维护
每一个VUE组件都是一个独立的个体（独立的VM实例）：DATA是独立的（不同组件的DATA应该互不干扰）、有完整的生命周期、方法等也是独立的
能够实现组件的嵌套：需要掌握组件之间的信息通信
…
VUE中的组件
vue中的组件是自定义的标签,可以扩展原生的html元素,封装可重用的代码
一个 自定义标签 vue 就会把他看成一个组件 （除w3c规定以外的标签）， 自定义标签原本没有实际意义，但是vue会给这些标签赋予一定的意义
全局组件 & 局部组件
全局组件：无需单独引用或者配置，直接在大组件中调取全局组件即可

可以声明一次在任何地方使用

一般在写插件时全局组件使用的多一些

vue.filters 它也是放到全局中，不用声明直接用

全局组件是声明在 vue类 上的

复制代码 局部组件 ：1- 创建 2- 注册 3- 引用

必须告诉这个组建属于谁

局部组件是声明在 实例 vm 上的

组件是相互独立的 不能直接跨作用域 实例(vm)也是一个组件， 组件中拥有生命周期函数

</div>
<!-- IMPORT JS-->
<script src="./20191007/node_modules/vue/dist/vue.js"></script>
<script>
    /*
    *  局部组件-使用三部曲:
    *     1. 创建
    *     2. 注册
    *     3. 引用
    *  组件是相互独立的  不能直接跨作用域 实例(vm)也是一个组件， 组件中拥有生命周期函数
    *
    * */
    let obj ={ face:'丑到爆' }; //=> 如果组件共用了数据，会导致数据同时更新 （=错误写法=） （但是组件 特点 独立性）
    /*
     子组件不能直接使用父组件的数据 （组件之间的数据交互）
     组件理论上可以无限嵌套
     */

    //=> 1. 创建这个组件
    let handelesome1 ={
        template:`<div @click="fn">1.帅气 {{face}} {{a}}</div>`,
        /* face='颜值爆表' === @click="fn"*/
        data(){ //=> 这里的data 必须是一个函数
            return obj
        },
        methods:{
            fn(){
                //=> this 为当前的组件
                this.face = '颜值爆表'
            }
        }

    } ;
    let handelesome2 ={
        template:'<div>2.霸气 {{face}}{{a}}</div>',
        data(){
            return obj
        }
    } ;

    let vm = new Vue({
       el:'#app',
        data:{ //=> 只有这里的data是 对象
           title:"你自认为自己??？",
            //=> 这里的a 属性 在 局部组件中调用引发报错
            //=>
            a:1


        },

        components:{
            //=> 2. 注册这个组件  ES6名字一样写一个
            handelesome1,
            handelesome2
        }
    });
</script>

复制代码 嵌套组件 1- 创建 2- 注册 3- 引用 如果要在一个组件使用另一个组件， 1.先保证使用的组件得是真实存在， 2.在需要引用这个组件的实例上通过components注册这个组件， 3.组件需要在父级的模板中通过标签的形式引入

复制代码 父传子-props--属性传递 props:[]方式传递属性 以及 对象 的方式传递属性 对象属性传递的参数校验 type：[] 校验类型 default:0, 设置默认值 required: true, 设置是必须传递 属性，但是不能和default同时使用 validator(val){ } 自定义校验器

父亲:{{money}}

复制代码 基于ref实现父子组件信息通信 ref 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例，基于此可以快速获取和操作子组件中的数据 parent和children是获取组件和子组件的实例，只不过$children是一个数组集合，需要我们记住组件顺序才可以 VUE--发布emit 订阅on 订阅发布模式定义了一种一对多的依赖关系，让多个订阅者对象同时监听某一个主题对象

创建一个实例，相当于传建一个任务队列
vm.$on(自定义事件,要执行的方法)把自定义事件和方法订阅到任务队列中;值得注意的是:我们调取子组件的时候,基于@xxx{=}^{\prime }func也相当于给子组件所在实例的任务队列订阅一个方法vm.$emit(自定义事件，需要传参的信息)把指定自定义事件中的 方法触发执行,可以给方法传递对应的信息
vue的单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：
加载渲染过程：父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

子组件更新过程：父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

父组件更新过程：父 beforeUpdate -> 父 updated

销毁过程：父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。子组件想修改时，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。

有两种常见的试图改变一个 prop 的情形 :
这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。 在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值
这个 prop 以一种原始的值传入且需要进行转换。 在这种情况下，最好使用这个 prop 的值来定义一个计算属性

复制代码 子传父--发布$emit 通知 基于 发布订阅模式 on 及emit 单向数据流来实现子通知父

父亲:{{money}}

<child :m="money" @child-msg="things"></child>

复制代码 事件总线 -- EventBus 什么是事件总线？ 每个组件都是一个 Vue 的实例，相互之间不能互通数据；

要修改数据一定要通知，所以找一个第三方，让第三方监听事件，在事件触发时执行对应的修改数据的操作，这个第三方就是事件总线；

事件总线的用法
创建一个空的 Vue 实例；let eventBus = new Vue();

eventBus.$on(自定义事件名, 事件函数) 监听事件

eventBus.$emit(事件名) 触发事件

复制代码 插槽 slot 插槽是什么？ 当引用组件时，我们可以向组件的标签中嵌入内容。这些内容可以嵌入到子组件中，但是需要使用插槽机制即，slot；

如何使用插槽
首先在创建子组件时需要声明一个 slot 标签占位；

在组件标签中嵌入内容

具名slot和匿名slot
匿名 slot，在声明 slot 时不写 name 属性，嵌入在组件标签中没有写 slot 属性的标签都会放在匿名 slot 中

具名 slot，在声明 slot 时要写上 name 属性；嵌入在组件标签中的内容需要指定 slot=“slot的名字”

这是默认的内容

hahahah

这是个头

主体

尾部

复制代码 基于 provide 和 inject 实现祖先与后代的通信 祖先组件基于provide注册需要供后代组件使用的数据 { provide:{ //=>对象或者返回对象的函数都可以（属性值如果是data中的数据，则必须使用函数的方法进行处理） name:'zhufeng', year:10 }, ... } 复制代码 后代组件基于inject声明需要使用的数据并调取使用 { inject:['name'], methods:{ func(){ let name=this.name; } } }