自定义事件、ref属性、动态组件、插槽、自定义指令

子组件向父组件传值

自定义事件

eg：

兄弟组件之间的数据共享：现成的解决方案

EventBus

1. 创建eventBus.js模块，并向外共享一个Vue实例对象
2. 在数据发送方，调用bus.$emit(‘事件名称’,要发送的数据)方法触发自定义事件
3. 在数据接受方，调用bus.$on(‘事件名称’,事件处理函数)方法注册一个自定义事件

复习总结：内置的对象$evet用来

卸载安装包命令：npm uni vue -s

循环渲染指令：v-for还需要绑定一个key属性，不然有些包里面会报错，拿索引当key没有意义！！

computed节点：在定义的时候要定义成function；在使用的时候，作为普通属性使用即可；要return 一个计算的结果；只要任何一个依赖的数据项发生变化，计算属性就会重新计算。

ref引用操作DOM

在vue中，不建议安装和使用jQuery

每一个vue组件的实例上都包含一个$refs对象，里面存储着对应的DOM对象或者组件的引用。默认情况下，组件的$refs指向一个空对象！！

给标签添加一个ref属性并起一个名字，通过this.$refs…就可以拿到dom元素的引用，多个dom元素的名字不能冲突！！

使用ref引用组件的实例：

this.$nextTick(callback)会将回调函数推迟到下一个DOM更新周期之后执行，等DOM元素更新之后在来执行回调函数！！

不能使用updated的原因：只要数据发生变化就要触发相应的操作，是以数据为主的，和按钮点击不一样！

数组的every方法：判断数组的每一项是否都满足条件，如果都满足就返回true，如果不满足就返回false。

数组的数组的reduce方法：

        const sum = arr.filter(item => item.state).reduce((sum, item) => {

            return sum += item.price * item.count

        }, 0)

reduce中的两个参数:(累加的结果，当前循环项)=>{基本表达式}，初始值

返回一个累加的结果

动态组件

我们需要动态的增删某个组件的时候需要用到！！

调用<component :is="left"></component>就能动态的创建组件。component标签是vue内置的。

keep-alive可以保存内部的组件没有被销毁！！

keep-alive对应的生命周期函数

当组件第一次被创建的时候既会执行created生命周期也会执行activated生命周期

当组件再次被激活的时候不会触发created。

include属性可以指定被缓存的组件，可以多个组件名称同时写用，隔开，exclude排除不被缓存两个只能使用一个，不能同时用。

如果在声明组件的时候没有为组件指定name名称，则组件的名称默认就是注册时候的名称。当提供了组件name属性之后就要使用name属性声明的名称！！

组件的注册名称的应用场景是以标签的形式把注册好的组件渲染到页面结构中

组件声明的name名称的主要应用场景是结合keep-alive标签实现组件的缓存功能，在调试工具中能够显示出来的名称

插槽

使用my-com标签，可以自定义组件的某部分ui结构

每一个slot插槽都要有一个name名称，如果省略name属性有一个默认的名称default

如果要把内容填入到指定name的插槽中v-slot后面要跟插槽的名称，指令不能直接用于元素身上，要使用template标签上（是一个虚拟的标签，起包裹作用不会被渲染成实质性的标签元素）

v-slot简写成#;要想在slot插槽中提供一个默认的内容可以直接写在slot标签里面

vant组件库

具名插槽：具有具体名字的插槽

作用域插槽：

在封装组件时为预留的<slot>提供属性对应的值，这种用法叫做“作用域插槽”

同时可以对scope进行解构直接访问其属性。

$event也可以在插槽中使用，当val被覆盖的时候可以传递！

自定义指令

通过binding获取指令的参数值

bind方法只有在元素第一次被绑定到元素上的时候，会立即触发bind函数，其余情况下不会被触发，为了解决这个缺点，我们使用update函数可以在数据发生改变之后重新触发。

如果update和bind函数的机构体相同，我们可以简化写法，可以将color写成函数的形式。

定义全局自定义指令：

eslint：约束代码风格的一种工具