动态组件&插槽&自定义指令

最新推荐文章于 2024-09-09 11:08:24 发布

不想qiao代码

最新推荐文章于 2024-09-09 11:08:24 发布

阅读量106

点赞数 1

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

本文链接：https://blog.csdn.net/m0_47794838/article/details/128807009

版权

vue学习专栏收录该内容

25 篇文章 0 订阅

订阅专栏

一、动态组件

1.什么是动态组件

动态组件指的是动态切换组件的显示与隐藏。

2.如何实现动态组件渲染

vue提供了一个内置的<component>组件，专门用来实现动态组件的渲染。

3.使用keep-alive保持状态

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

4. keep-alive对应的生命周期函数

当组件被缓存时，会自动触发组件的deactivated生命周期函数。
当组件被激活时，会自动触发组件的activated生命周期函数。

5.keep-alive 的include属性

include属性用来指定:只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔;

App.vue

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr />

    <button @click="comName = 'Left'">展示 Left</button>
    <button @click="comName = 'Right'">展示 Right</button>

    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <!-- 1. component 标签是 vue 内置的，作用：组件的占位符 -->
      <!-- 2. is 属性的值，表示要渲染的组件的名字 -->
      <!-- 3. is 属性的值，应该是组件在 components 节点下的注册名称 -->

      <!-- keep-alive 会把内部的组件进行缓存，而不是销毁组件 -->
      <!-- 在使用 keep-alive 的时候，可以通过 include 指定哪些组件需要被缓存； -->
      <!-- 或者，通过 exclude 属性指定哪些组件不需要被缓存；但是：不要同时使用 include 和 exclude 这两个属性 -->
      <keep-alive exclude="MyRight">
        <component :is="comName"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'

export default {
  data() {
    return {
      // comName 表示要展示的组件的名字
      comName: 'Left'
    }
  },
  components: {
    // 如果在“声明组件”的时候，没有为组件指定 name 名称，则组件的名称默认就是“注册时候的名称”
    Left,
    Right
  }
}
</script>

<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>

**便利贴：**同时按住Shift键和想要大写的字母可以快速将自己大写，松开Shift键即可转为小写。

Left.vue放在components文件夹下：

<template>
  <div class="left-container">
    <h3>Left 组件 --- {{ count }}</h3>
    <button @click="count += 1">+1</button>
  </div>
</template>

<script>
export default {
  name: 'MyLeft',
  data() {
    return {
      count: 0
    }
  },
  created() {
    console.log('Left 组件被创建了！')
  },
  destroyed() {
    console.log('Left 组件被销毁了~~~')
  },

  // 当组件第一次被创建的时候，既会执行 created 生命周期，也会执行 activated 生命周期
  // 当时，当组件被激活的时候，只会触发 activated 生命周期，不再触发 created。因为组件没有被重新创建
  activated() {
    console.log('组件被激活了，activated')
  },
  deactivated() {
    console.log('组件被缓存了，deactivated')
  }
}
</script>

<style lang="less">
.left-container {
  padding: 0 20px 20px;
  background-color: orange;
  min-height: 250px;
  flex: 1;
}
</style>

Right.vue放在components文件夹下：

<template>
  <div class="right-container">
    <h3>Right 组件</h3>
  </div>
</template>

<script>
export default {
  // 当提供了 name 属性之后，组件的名称，就是 name 属性的值
  // 对比：
  // 1. 组件的 “注册名称” 的主要应用场景是：以标签的形式，把注册好的组件，渲染和使用到页面结构之中
  // 2. 组件声明时候的 “name” 名称的主要应用场景：结合 <keep-alive> 标签实现组件缓存功能；以及在调试工具中看到组件的 name 名称
  name: 'MyRight'
}
</script>

<style lang="less">
.right-container {
  padding: 0 20px 20px;
  background-color: lightskyblue;
  min-height: 250px;
  flex: 1;
}
</style>

二、插槽

1.什么是插槽

插槽（Slot)是vue为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。可以把插槽认为是组件封装期间，为用户预留的内容的占位符。

2.体验插槽的基础用法

在封装组件时，可以通过<slot>元素定义插槽，从而为用户预留内容占位符。
如果在封装组件时没有预留任何插槽，则用户提供的任何自定义内容都会被丢弃。
封装组件时，可以为预留的插槽提供后备内容（默认内容)。如果组件的使用者没有为插槽提供任何内容，则后备内容会生效。

3.具名插槽

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

注意：没有指定name名称的插槽,会有隐含的名称叫做“default”。

在向具名插槽提供内容的时候，我们可以在一个<template>元素上使用v-slot 指令，并以v-slot的参数的形式提供其名称。跟v-on和v-bind一样，v-slot 也有缩写，即把参数之前的所有内容(v-slot:)替换为字符 # 。例如v-slot: header可以被重写为 # header。

4.作用域插槽

在封装组件的过程中，可以为预留的插槽绑定 props数据，这种带有props 数据的 叫做“作用域插槽”。
可以使用v-slot: 的形式，接收作用域插槽对外提供的数据。
作用域插槽对外提供的数据对象，可以使用解构赋值简化数据的接收过程。

三、自定义指令

1.什么是自定义指令

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

2.自定义指令的分类

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

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

3.私有自定义指令

在每个vue组件中，可以在 directives 节点下声明私有自定义指令。示例代码如下:
在这里插入图片描述

4.使用自定义指令

在使用自定义指令时，需要加上v- 前缀。示例代码如下:
在这里插入图片描述

5.为自定义指令动态绑定参数值

在template结构中使用自定义指令时，可以通过等号( = )的方式，为当前指令动态绑定参数值:
在这里插入图片描述

6.通过binding获取指令的参数值

在声明自定义指令时，可以通过形参中的第二个参数，来接收指令的参数值:
在这里插入图片描述

7.update函数

bind 函数只调用1次：当指令第一次绑定到元素时调用，当DOM更新时 bind函数不会被触发。update函数会在每次DOM更新时被调用。示例代码如下:
在这里插入图片描述

8.函数简写

如果insert和update函数中的逻辑完全相同，则对象格式的自定义指令可以简写成函数格式:
在这里插入图片描述

9.全局自定义指令

全局共享的自定义指令需要通过“Vue.directive()”进行声明，示例代码如下:
在这里插入图片描述
*注意：*全局声明的过滤器和指令都是放在main.js文件中

插槽和自定义指令的实验代码如下：

main.js文件

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false  //决定是否能在终端看到提示（提示在上线的时候记得修改production)

// 全局自定义指令
/* Vue.directive('color', {
  bind(el, binding) {
    el.style.color = binding.value
  },
  update(el, binding) {
    el.style.color = binding.value
  }
}) */

Vue.directive('color', function(el, binding) {
  el.style.color = binding.value
})

// Vue.filter('过滤器的名字', function () {  })

new Vue({
  render: h => h(App)
}).$mount('#app')

App.vue

<template>
  <div class="app-container">
    <h1 v-color="color">App 根组件</h1>
    <p v-color="'red'">测试</p>

    <button @click="color = 'green'">改变 color 的颜色值</button>
    <hr />

    <Article>
      <template #title>
        <h3>一首诗</h3>
      </template>

      <template #content="{ msg, user }">
        <div>
          <p>啊，大海，全是水。</p>
          <p>啊，蜈蚣，全是腿。</p>
          <p>啊，辣椒，净辣嘴。</p>
          <p>{{ msg }}</p>
          <p>{{ user.name }}  {{ user.age }}岁</p>
        </div>
      </template>

      <template #author>
        <div>作者：彬果锅</div>
      </template>
    </Article>

    <hr />

    <div class="box" style="display: none;">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <Left>
        <!-- 默认情况下，在使用组件的时候，提供的内容都会被填充到名字为 default 的插槽之中 -->
        <!-- 1. 如果要把内容填充到指定名称的插槽中，需要使用 v-slot: 这个指令 -->
        <!-- 2. v-slot: 后面要跟上插槽的名字 -->
        <!-- 3. v-slot: 指令不能直接用在元素身上，必须用在 template 标签上 -->
        <!-- 4. template 这个标签，它是一个虚拟的标签，只起到包裹性质的作用，但是，不会被渲染为任何实质性的 html 元素 -->
        <!-- 5. v-slot: 指令的简写形式是 # -->
        <template #default>
          <p>这是在 Left 组件的内容区域，声明的 p 标签</p>
        </template>
      </Left>
    </div>
  </div>
</template>

<script>
import Left from '@/components/Left.vue'
import Article from '@/components/Article.vue'

export default {
  data() {
    return {
      color: 'blue'
    }
  },
  components: {
    Left,
    Article
  },
  // 私有自定义指令的节点
  directives: {
    // 定义名为 color 的指令，指向一个配置对象
    /* color: {
      // 当指令第一次被绑定到元素上的时候，会立即触发 bind 函数
      // 形参中的 el 表示当前指令所绑定到的那个 DOM 对象
      bind(el, binding) {
        console.log('触发了 v-color 的 bind 函数')
        el.style.color = binding.value
      },
      // 在 DOM 更新的时候，会触发 update 函数
      update(el, binding) {
        console.log('触发了 v-color 的 update 函数')
        el.style.color = binding.value
      }
    } */
    color(el, binding) {
      el.style.color = binding.value
    }
  }
}
</script>

<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>

components文件夹下的Article.vue

<template>
  <div class="article-container">
    <h3 v-color="'red'">Article 组件</h3>
    <!-- 文章的标题 -->
    <div class="header-box">
      <slot name="title"></slot>
    </div>

    <!-- 文章的内容 -->
    <div class="content-box">
      <!-- 在封装组件时，为预留的 <slot> 提供属性(msg,user)对应的值，这种用法，叫做 “作用域插槽” -->
      <slot name="content" msg="hello vue.js" :user="userinfo"></slot>
    </div>

    <!-- 文章的作者 -->
    <div class="footer-box">
      <slot name="author"></slot>
    </div>
  </div>
</template>

<script>
export default {
  // 首字母要大写
  name: 'Article',
  data() {
    return {
      // 用户的信息对象
      userinfo: {
        name: 'zs',
        age: 20
      }
    }
  }
}
</script>

<style lang="less" scoped>
.article-container {
  > div {
    min-height: 150px;
  }
  .header-box {
    background-color: pink;
  }
  .content-box {
    background-color: lightblue;
  }
  .footer-box {
    background-color: lightsalmon;
  }
}
</style>

components文件夹下的Left.vue

<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <hr />
    <!-- 声明一个插槽区域 -->
    <!-- vue 官方规定：每一个 slot 插槽，都要有一个 name 名称 -->
    <!-- 如果省略了 slot 的 name 属性，则有一个默认名称叫做 default -->
    <slot name="default">
      <h6>这是 default 插槽的后备内容</h6>
    </slot>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less">
.left-container {
  padding: 0 20px 20px;
  background-color: orange;
  min-height: 250px;
  flex: 1;
}
</style>

components文件夹下的Right.vue

<template>
  <div class="right-container">
    <h3>Right 组件</h3>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less">
.right-container {
  padding: 0 20px 20px;
  background-color: lightskyblue;
  min-height: 250px;
  flex: 1;
}
</style>