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

最新推荐文章于 2024-02-26 09:51:14 发布

qq_52822043

最新推荐文章于 2024-02-26 09:51:14 发布

阅读量2.1k

点赞数

文章标签： vue vue.js 前端

本文链接：https://blog.csdn.net/qq_52822043/article/details/124380414

版权

6）this.$nextTick(cb)方法

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提供了一个内置的<component>组件，专门用来实现组件的动态渲染。

<component>：组件的占位符
is属性：指定要渲染的组件名称
<component is="要渲染的组件的名称"></component>

2）实现动态组件渲染

<template>
  <div>
    <h1>App根组件</h1>
    <button class="btn btn-primary" @click="comName = 'MyHome'">首页</button>
    <button class="btn btn-info" @click="comName = 'MyMovie'">电影</button>
    <hr>

    <!-- <my-home></my-home>
    <my-movie></my-movie> -->
    <component :is="comName"></component>
  </div>

</template>



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

3）使用keep-alive保持状态

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

3. 插槽

1）插槽

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

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

2）插槽的基础用法

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

结果为：

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

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

②后备内容

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

结果为：

③具名插槽

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

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

④为具名插槽提供内容

在向具名插槽提供内容的时候，可以在<template>元素上使用v-slot指令，并以v-slot的参数的形式提供其名称。

    <my-atricle>
      <template v-slot:header>
        <h1>滕王阁序</h1>
      </template>
      <template v-slot:default>
        <p>豫章故郡，洪都新府。</p>
        <p>星分翼轸，地接衡庐</p>
        <p>襟三江而带五湖，控蛮荆而引瓯越。</p>
      </template>
      <template v-slot:footer>
        <p>落款：王勃</p>
      </template>
    </my-atricle>

结果为：

⑤具名插槽的简写形式

把参数之前的所有内容（v-slot：）替换为字符#。

    <my-atricle>
      <template #header>
        <h1>滕王阁序</h1>
      </template>
      <template #default>
        <p>豫章故郡，洪都新府。</p>
        <p>星分翼轸，地接衡庐</p>
        <p>襟三江而带五湖，控蛮荆而引瓯越。</p>
      </template>
      <template #footer>
        <p>落款：王勃</p>
      </template>
    </my-atricle>

3）作用域插槽

在封装组件的过程中，可以为预留的<slot>插槽绑定props数据，这种带有props数据的<slot>叫做作用域插槽。

<template>
  <div>
    <h3>Test组件</h3>
    <slot :info="information" :msg="message"></slot>
  </div>
</template>

<script>
export default {
  name: 'MyTest',
  data() {
    return {
      information: {
        username: 'zs',
        age: 20
      },
      message: '123'
    }
  }
}
</script>


    <my-test>
      <template #default="info">
        {{ info }}
      </template>
    </my-test>

结果为：

①解构作用域插槽的prop

    <my-test>
      <template #default="{info, msg}">
        <p>{{ info.name }}</p>
        <p>{{ msg }}</p>
      </template>
    </my-test>

结果为：

②作用域插槽的应用场景

// Table.vue
<template>
  <table class="table table-bordered table-striped table-dark table-hover">
    <thead>
      <tr>
        <td>id</td>
        <td>name</td>
        <td>state</td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in list" :key="item.id">
        <!-- <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.state }}</td> -->
        <!-- 作用域插槽的自定义属性 -->
        <slot :user="item"></slot>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'MyTable',
  data() {
    return {
      list: [
        { id: 1, name: '张三', state: true },
        { id: 2, name: '李四', state: false },
        { id: 3, name: '王五', state: false },
      ]
    }
  }
}
</script>



// App.vue
    <my-table>
      <!--  解构作用域插槽的prop -->
      <template #default="{ user }">
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <!-- <td>{{ user.state }}</td> -->
        <td>
          <input type="checkbox" :checked="user.state">
        </td>
      </template>
    </my-table>

结果为：

4. 自定义指令

1）自定义指令

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

vue中的自定义指令分为两类，分别是：

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

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

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

<input type="text" class="form-control" v-focus>


directives: {
    // 声明私有自定义指令不用v-
    focus: {
      // 当被绑定的元素(这里是input)插入到DOM中，就会自动触发mounted()函数
      mounted(el) {
        el.focus()
      }
    }

结果为：

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

全局共享的自定义指令需要通过单页面应用程序的实例对象进行声明。

4）updated函数

mounted函数：只在元素第一次插入DOM时被调用，当DOM更新时mounted函数不会被触发。

updated函数：会在每次DOM更新完成后被调用。

在vue2的项目中使用自定义指令时，mounted->bind，updated->updated

    <input type="text" class="form-control" v-focus>
    <!-- 当按下button，input输入框就会失去焦点 -->
    <!-- 解决方案：updated()函数，每次点击完按钮之后，输入框就会恢复自己的焦点 -->
    <button class="btn-primary" @click="count += 1">+1</button>


// 声明全局自定义指令
app.directive('focus', {
  mounted(el) {
    el.focus()
  },
  updated(el) {
    el.focus()
  }
})

5）函数简写

如果mounted和updated函数中的逻辑完全相同，则可以简写成：

6）指令的参数值

在绑定指令时，可以通过等号的形式为指令绑定具体的参数值。

qq_52822043

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
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）作用域插槽①解构作...
复制链接

扫一扫