组件插槽,vue自定义指令,$ref使用（获取DOM对象或组件对象）, $nextTick使用,组件使用v-model(v-model底层原理)

ifreen

已于 2022-10-06 15:23:23 修改

阅读量791

点赞数

文章标签： vue.js 前端 javascript 前端框架

于 2022-10-06 14:33:54 首次发布

本文链接：https://blog.csdn.net/m0_70847086/article/details/127182773

版权

1.1-插槽slot使用

插槽作用： 父组件传递 结构 给 子组件

官网文档：

通过插槽分发内容

插槽后备内容

插槽使用2个步骤

第一步：在子组件中定义一个插槽 <slot>默认值：如果父组件没有传递则默认显示</slot>

第二步：在父组件中传递结构: <子组件>父组件需要传递的结构</子组件>

插槽的作用是什么让父组件传递什么到子组件中?

html结构
插槽的默认值写哪里?

<solt>默认值</slot>

1.2-具名插槽

官方文档：具名插槽
- 具名插槽实际开发应用：Vant 3 - Lightweight Mobile UI Components built on Vue
1.插槽作用：父组件 传递html结构 给子组件
- 给所有slot分发相同内容
2.具名插槽作用：父组件 传递多个html结构 给子组件
- 给不同slot分发不同内容

具名插槽语法如下

1.给子组件的<slot>添加name属性： name="插槽名"

2.父组件使用v-slot:插槽名 : 给指定的插槽传递结构

注意：这个v-slot指令必须要写在<template>标签中,否则会报错

<template>是HTML5新增的一个语义化标签，模板的意思。这个标签本身不会被渲染，因此最终在页面是看不见的。这个标签类似于div,就是一个空盒子容器。与div唯一的区别就是它不会渲染。

vue中并不是所有的指令都能简写，有简写符号的指令主要有三个

v-on 指令可以简写成 @

v-bind指令可以简写成 :

v-slot指令可以简写成 #

1.3-作用域插槽

官网文档：作用域插槽
- 作用域插槽实际开发应用：Element - The world's most popular Vue UI framework

1.插槽与props的异同点

相同点：都是父传子

不同点：

props: 传递的是数据

插槽：传递的是html结构

2.作用域插槽和$emit异同点

相同点：都是子传父

不同点：

$emit : 子传父的数据通过事件来接收

作用域插槽：子传父的数据是通过插槽v-slot接收（子传父的数据，只能给插槽用）

1.插槽作用：父组件传递 html结构 给子组件
2.具名插槽作用：父组件传递 多个html结构 给子组件
3.作用域插槽作用：父组件给子组件传递插槽时，可以使用子组件内部的数据

作用域插槽语法如下

1.给子组件的<slot>添加一个自定义属性 : <slot :属性名="属性值" ></slot>

2.给父组件的<template>添加v-slot属性接收数据: <template v-slot="对象名"></template>

父组件使用子组件内部数据语法： 对象名.属性名

注意点 : 不要把 具名插槽语法 和 作用域插槽 语法搞混淆

具名插槽: <template v-slot:name值></slot>

作用域插槽: <template v-slot="对象名"></slot>

作用域插槽基本使用

02-vue自定义指令

官方文档：自定义指令 — Vue.js
1.复习指令作用：给标签添加额外的功能
2.复习指令本质：行内自定义属性
3.自定义指令作用：给标签添加 vue没有的，额外的功能

1.1-自定义指令：局部注册

局部注册：只能在当前组件使用
需求：
- 1.添加一个自定义指令 v-focus,作用是让input表单自动聚焦
- 2.添加一个自定义指令v-red,作用是设置标签文本颜色

<template>
  <div>
    <!-- 使用指令    v-指令名 -->
    <input type="text" v-focus />
    <br />
    <input type="text" v-red />
    <p v-red>我是p标签，我使用了自定义指令v-red</p>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  //自定义指令都写在这个对象里面
  directives: {
    //1.指令名:  focus
    focus: {
      // inserted(el) :  当指令被使用的时候会执行一次
      // update(el) : 当指令所在的组件虚拟dom变化的时候执行（不常用）
      inserted(el) {
        //el : 你的指令写在哪一个标签上，这个el就是标签dom对象
        el.focus()
      }
    },
    //2.指令名： red
    red: {
      inserted(el) {
        el.style.color = "red"
      }
    }
  }
}
</script>

<style></style>

1.2-自定义指令：全局注册

全局注册：在main.js中注册，任何地方可用
- 底层原理：挂载到Vue构造函数原型中

// 全局指令 - 到处"直接"使用
Vue.directive("focus", {
  inserted(el) {
    el.focus() // 触发标签的事件方法
  }
})

03-$ref使用（获取DOM对象或组件对象）

官方文档：https://cn.vuejs.org/v2/api/#vm-refs
ref作用：在vue中操作dom元素
- vue不推荐我们直接操作dom。如果真的要在vue中操作dom,可以使用ref语法
  - 说人话： vue不能直接操作dom，真的要操作也要按vue规定的语法来。（ref语法）

1.1-ref用于标签

ref语法使用流程语法

(1)给标签添加自定义属性red :<button ref="属性名"></button>

vue会自动把页面所有的ref属性，挂载到vue实例的$ref对象中

(2)通过 vm.$refs.属性名 获取该标签

一定要注意 : vue在mounted勾子中完成页面真实DOM渲染，所以最早能获取dom的就是mounted钩子

ref易错点

1.添加的的时候是: ref

2.获取的时候是: $refs

ref.vue

<template>
  <div>
    <button ref="btn">按钮</button>
    <p ref="p1">p标签</p>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  created() {
      //这个勾子只是完成data数据初始化，并没有渲染真实dom。因此无法获取标签
      console.log(this.$refs)
  },
  mounted() {
      //这个勾子完成初始dom渲染，也是最早能获取页面dom元素的勾子
      console.log(this.$refs)//{ btn:按钮标签 , p1:p标签 }   
      console.log(this.$refs.btn)//button标签dom对象
      console.log(this.$refs.p1)//p标签dom对象
  },
}
</script>

<style></style>>

App.vue

<template>
  <div>
    <ref></ref>
  </div>
</template>

<script>
//导入局部组件
import ref from "./components/ref.vue"
export default {
  data() {
    return {}
  },
  components: {
    ref
  },
}
</script>

<style>

</style>

1.2-ref用于组件

组件在使用的时候，相当于是一个自定义标签
- 因此：ref也可以用在组件上

ref设置给不同的标签，获取到的东西是不同的。 1.如果设置给dom元素(html标签)，则获取的是dom元素对象 2.如果设置给组件(组件也是一个标签)，则获取的是组件vue实例对象 官方文档：访问子组件或子元素

04-$nextTick使用

$nextTick工作原理官方文档：深入响应式原理 — Vue.js

需求：点击搜索按钮, 弹出聚焦的输入框, 按钮消失

<template>
  <div>
      <input ref="myInp" type="text" placeholder="这是一个输入框" v-if="isShow">
      <button v-else @click="btn">点击我进行搜索</button>
  </div>
</template>

<script>
// 目标: 点按钮(消失) - 输入框出现并聚焦
// 1. 获取到输入框
// 2. 输入框调用事件方法focus()达到聚焦行为
export default {
    data(){
        return {
            isShow: false,
        }
    },
    methods: {
        async btn(){
            this.isShow = true;
            /* 1.以下代码无法实现输入框聚焦
            原因： data变化更新DOM是异步的,输入框还没有挂载到真实DOM上
            */
            // this.$refs.myInp.focus()
            
            /* 2.解决方案：使用$nextTick
            (1) $nextTick是一个异步微任务,等待当前函数的dom渲染结束后执行
            (2) $nextTick类似于一个非常高级的定时器,自动追踪DOM更新，更新好了就触发
            */
            // this.$nextTick(() => {
            //     this.$refs.myInp.focus()
            // })
            /* 3.拓展： await异步函数 
            原因：  $nextTick() 返回的是一个Promise对象（底层基于promise）
            */
            await this.$nextTick()
            this.$refs.myInp.focus()
        }
    }
}
</script>

05-组件使用v-model(v-model底层原理)

官网文档：组件使用v-model

语法:

子组件中
1. props定义value的属性
2. 数据改变的时候通过this.$emit('input',新的数据)
只要子组件满足上面的条件,父组件就可以直接简写为v-model
1. v-model用于表单：快速获取/设置表单的值
2. v-model用于组件：快速实现 props父传子和 $emit子传父