动态组件、keep-alive的使用及自定义指令

目录

1. 动态组件

2.如何实现动态组件渲染

3. 使用keep-alive保持状态

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

5. keep-alive的include属性

 自定义指令

1.什么是自定义指令

2. 自定义指令的分类

3. 私有自定义指令

4. update函数

5. 函数简写

 全局自定义指令：

---

1. 动态组件

动态组件指的是动态切换组件的显示与隐藏。

2.如何实现动态组件渲染

vue 提供了一个内置的 <component> 组件,专门用来实现动态组件的渲染。示例代码如下:

data() {// 1.当前要渲染的组件名称return { comName: 'Left' }
}<!-- 2.通过 is 属性，动态指定要渲染的组件-->
<component :is="comName"></component>
<!-- 3.点击按钮，动态切换组件的名称-->
<button @click="comName = 'Left'">展示 Left 组件</button>
<button @click= "comName = 'Right'">展示 Right 组件</button>

is属性指定的是谁，渲染的就是谁。

点击不同的按钮，显示不同的组件，实现的是不同组件之间的来回切换

3. 使用keep-alive保持状态

当组件之间来回切换的时候，例如left组件和right组件，页面最开始默认为left组件，当切换为right

组建的时候，left组件被销毁，切换回left组件会创建一个新的left组件，相当于重置了，那么之前的

页面数据将会消失，那么如何保存之前的数据呢？我们就要用到keep-alive了。

       默认情况下，切换动态组件时无法保持组件的状态。此时可以使用vue内置的<keep-alive>组

件保持动态组件的状态。示例代码如下:

// 只要是用keep-alive包裹的，用component标签展示出来的组件，都是会被缓存的
<keep-alive><component :is="comName"></component>
</keep-alive>

用keep-alive标签包裹的标签，不会被销毁，只是被隐藏了，失活了。

当我们想看到组件缓存的时候，当缓存的时候，去做一件事，被激活的时候，再去做一件事；

这时需要用到keep-alive的生命周期函数。

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

当组件被缓存时，会自动触发组件的deactivated生命周期函数。

当组件被激活时，会自动触发组件的activated生命周期函数。

activated() {console.log('组件被激活了，activated')
},
deactivated() {console.log('组件被缓存了，deactivated')
},// 以上是和data()或created()平级

5. keep-alive的include属性

include属性用来指定:只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔:

<keep-alive include= "MyLeft,MyRight"><component :is="comName"></component>
</keep-alive>

exclude属性的使用：

 在使用 keep-alive 的时候，可以通过 include 指定哪些组件需要被缓存;

或者，通过 exclude 属性指定哪些组件不需要被缓存；但是：不要同时使用 include  和 exclude 这

两个属性。

 自定义指令

1.什么是自定义指令

 vue 官方提供了v-text、v-for、 v-model、 v-if 等常用的指令。除此之外 vue 还允许开发者自定义

指令。

2. 自定义指令的分类

vue 中的自定义指令分为两类,分别是:

• 私有自定义指令
• 全局自定义指令

3. 私有自定义指令

 在每个 vue 组件中，可以在 directives 节点下声明私有自定义指令。示例代码如下:

directives: {color: {// 为绑定到的 HTML 元素设置红色的文字bind(el) { //形参中的 el 是绑定了此指令的、原生的 DOM 对象el.style.color = 'red';}}
}

给color指令传值：

 形参obj 官方都是写的binding，最好照官方。代码的具体实现如下：

 

 注意：bind指令只在第一次绑定的时候触发，如果后续值发生更新，将不会触发。

4. update函数

bind 函数只调用1次:当指令第一次绑定到元素时调用，当 DOM 更新时 bind 函数不会被触发。

update 函数会在每次DOM更新时被调用。示例代码如下:

directives: {color: {//当指令第一次被绑定到元素时被调用bind(el, binding) {el.style.color = binding.value},// 每次 DOM 更新时被调用update(el, binding) {el.style.color =binding.value}}
}

注意bind函数不能省略，是在第一次绑定时生效。

5. 函数简写

如果bind和update函数中的逻辑完全相同，则对象格式的自定义指令可以简写成函数格式:

directives: {// 在 insert 和 update 时，会触发相同的业务逻辑color(el,binding) { el.style.color = binding.value}
}

 全局自定义指令：

全局共享的自定义指令需要通过"Vue.directive()" 进行声明，示例代码如下:

//参数1:字符串，表示全局自定义指令的名字
//参数2:对象，用来接收指令的参数值
Vue.directive('color', function(el, binding) {el.style.color = binding.value
})