vue3.0-插槽、自定义指令

目录

1. ref引用

1）ref引用

2）使用ref引用DOM元素

3）使用ref引用组件实例

4）控制文本框和按钮的按需切换

5）让文本框自动获得焦点 

6）this.$nextTick(cb)方法 

2. 动态组件 

1）动态组件

2）实现动态组件渲染

3）使用keep-alive保持状态

3. 插槽 

1）插槽

2）插槽的基础用法

 ①没有预留插槽的内容会被丢弃

②后备内容

③具名插槽

④为具名插槽提供内容 

⑤具名插槽的简写形式 

3）作用域插槽

①解构作用域插槽的prop

②作用域插槽的应用场景

4. 自定义指令 

1）自定义指令

2）声明私有自定义指令的语法

3）声明全局自定义指令的语法

4）updated函数 

5）函数简写

6）指令的参数值 

---

1. ref引用

1）ref引用

ref用来辅助开发者在不依赖于jQuery的情况下，获取DOM元素或组件的引用。

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

结果为：

 

 

2）使用ref引用DOM元素

使用ref引用页面上的DOM元素，可以按照如下的方式进行操作：

结果为：

 

 

3）使用ref引用组件实例

4）控制文本框和按钮的按需切换

通过布尔值inputVisible来控制组件中的文本框与按钮的按需切换。

 

5）让文本框自动获得焦点 

 当文本框展示出来之后，如果希望它立即获得焦点，则可以为其添加ref引用，并调用原生DOM元素的.focus()方法即可。

 

6）this.$nextTick(cb)方法 

组件的$nextTick(cb)方法会把cb回调推迟到下一个DOM更新周期之后执行。

等组件的DOM元素异步地重新渲染完成后，再执行cb回调函数，从而能保证cb回调函数可以操作到最新的DOM元素。 

 

2. 动态组件 

1）动态组件

动态组件指的是动态切换组件的显示与隐藏。vue提供了一个内置的组件，专门用来实现组件的动态渲染。

1. ：组件的占位符
2. is属性：指定要渲染的组件名称
3. is="要渲染的组件的名称">

2）实现动态组件渲染

data() {
    return {
      comName: MyHome
    }
  },
  components: {
    MyHome,
    MyMovie
  }

 

3）使用keep-alive保持状态

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

 

3. 插槽 

1）插槽

插槽（slot）是vue为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。

可以把插槽认为是组件封装期间，为用户预留的内容的占位符。

 

2）插槽的基础用法

在封装组件时，可以通过元素定义插槽，从而为用户预留内容占位符。

结果为： 

 

 ①没有预留插槽的内容会被丢弃

如果在封装组件时没有预留任何插槽，则用户提供的任何自定义内容都会被丢弃。

 

 

②后备内容

封装组件时，可以为预留的插槽提供的后备内容（默认内容）。如果组件的使用者没有为插槽提供任何内容，则后备内容会生效。

结果为：

 

③具名插槽

如果在封装组件时需要预留多个插槽节点，则需要为每个插槽制定具体的name名称，这种拥有名称的插槽叫做“具名插槽”。

如果没有指定name名称的插槽，会有隐含的名称：default。

④为具名插槽提供内容 

在向具名插槽提供内容的时候，可以在