Vue day-06

BXY369

已于 2024-09-21 14:20:50 修改

阅读量1.4k

点赞数 50

分类专栏： Vue2 文章标签： vue.js javascript 前端

于 2024-09-11 13:00:00 首次发布

本文链接：https://blog.csdn.net/BXY369/article/details/142120703

版权

Vue2 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一. $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();
        }
    }
}