目录
一. $refs和$nextTick
1.1 $refs-获取DOM
利用 ref 和 $refs 可以用于获取 dom 元素
总结: 通过原生方法/ ref, 都可以获取原生DOM标签
1.2 $refs-获取组件对象
获取组件对象, 调用组件里方法
总结: ref定义值, 通过$refs.值 来获取组件对象, 就能继续使用组件内的方法和数据
1.3 $nextTick使用
Vue更新DOM-异步的
当操作通过"原生DOM"拿标签内容, 无法拿到新值
因为DOM更新是异步的
二. 组件进阶
2.1 组件的name属性作用
递归组件:一个组件要用自己的时候,可以通过自己的名字来使用自己。
2.2 动态组件
多个组件使用同一个挂载点,并动态切换,这就是动态组件。
2.2.1 动态组件切换
使用:is
用于动态组件且基于 DOM 内模板的限制解析来工作。
<div class="bgs">
<component :is="comName"></component>
</div>
2.2.2<keep-alive>
组件缓存-激活和非激活生命周期
组件切换会导致组件被频繁销毁和重新创建, 所以性能不高,Vue内置的keep-alive组件包起来要频繁切换的组件
<div class="bgs">
<keep-alive>
<component :is="comName"></component>
</keep-alive>
</div>
补充生命周期钩子函数:
-
activated - 激活
-
deactivated - 失去激活状态
总结: keep-alive可以提高组件的性能, 内部包裹的标签不会被销毁和重新创建, 触发激活和非激活的生命周期方法
2.3 插槽
用于实现组件的内容分发, 通过 slot 标签, 可以接收到写在组件标签内的内容
vue提供组件插槽能力, 允许开发者在封装组件时,把不确定的部分定义为插槽
2.3.1 匿名插槽
-
组件内用<slot></slot>占位
-
使用组件时夹着的地方, 传入标签替换slot
总结:组件内容分发技术, slot占位, 使用组件时传入替换slot位置的标签
显示默认内容
如果外面不给传, 想给个默认显示内容
使用方式:<slot>夹着内容默认显示内容, 如果不给插槽slot传东西, 则使用<slot>夹着的内容在原地显示
<slot>默认内容</slot>
2.3.2 具名插槽
当一个组件内有2处以上需要外部传入标签的地方
传入的标签可以分别派发给不同的slot位置
使用方式: v-slot一般用跟template标签使用 (template是html5新出标签内容模板元素, 不会渲染到页面上, 一般被vue解析内部标签)
总结:
slot的name属性起插槽名
使用组件时, template配合,使用v-slot进行绑定插槽的名称
v-slot:可以简化成#使用
v-bind可以省略成: v-on: 可以省略成@ v-slot: 可以简化成#
2.3.3 作用域插槽
-
使用组件插槽技术时, 需要用到子组件内变量,使用作用域插槽。
-
也就是子组件数据传递到父组件中。
使用方式:
-
子组件, 在slot上绑定属性和子组件内的值。
-
使用组件, 传入自定义标签, 用template和v-slot="scope" (自定义变量名)。
-
scope变量名自动绑定slot上所有属性和值。
总结: 组件内变量绑定在slot上, 然后使用组件v-slot="变量" 变量上就会绑定slot身上属性和值
三. 自定义指令
除了核心功能默认内置的指令 (v-model
和 v-show
),Vue 也允许注册自定义指令。 v-xxx
html+css的复用的主要形式是组件,需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。
自定义指令有5个生命周期(也叫作钩子函数)分别是bind ,inserted,update,componentUpdate,unbind
-
bind 只调用一次,指令第一次绑定到元素时候调用,用这个钩子可以定义一个绑定时执行一次的初始化动作。
-
inserted:被绑定的元素插入父节点的时候调用(父节点存在即可调用,不必存在document中)
-
update: 被绑定与元素所在模板更新时调用,而且无论绑定值是否有变化,通过比较更新前后的绑定值,忽略不必要的模板更新
-
componentUpdate :被绑定的元素所在模板完成一次更新更新周期的时候调用
-
unbind: 只调用一次,当指令与元素解绑的时候调用
3.1 全局注册
需求: 定义color指令-传入一个颜色, 给标签设置文字颜色
main.js定义处修改一下
// 目标: 自定义指令传值
Vue.directive('color', {
inserted(el, binding) {
el.style.color = binding.value
},
update(el, binding) {
el.style.color = binding.value
}
})
<p v-color="colorStr" @click="changeColor">修改文字颜色</p>
<script>
data() {
return {
theColor: "red",
};
},
methods: {
changeColor() {
this.theColor = 'blue';
},
},
</script>
总结: v-xxx, 自定义指令, 获取原生DOM, 自定义操作
3.2 局部注册
-
局部指令,需要定义在directives 的选项 用法和全局用法一样
-
局部指令只能在当前组件里面使用
-
当全局指令和局部指令同名时以局部指令为准
//局部指令,需要定义在 directives 的选项 directives: { color: { bind: function(el, binding){ el.style.backgroundColor = binding.value.color; } }, focus: { inserted: function(el) { el.focus(); } } }