Conocimiento sobre componentes dinámicos, ranuras e instrucciones personalizadas de Vue2.

1. Componentes dinámicos

1. Introducción

Los componentes dinámicos se refieren a cambiar dinámicamente la visualización y ocultación de componentes.

2. Realizar la renderización de componentes dinámicos.

Vue proporciona un componente integrado diseñado para representar componentes dinámicos.

3. Código relacionado con la representación dinámica

3.1 APLICACIÓN.vue

<template>
  <div id="app">
    <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属性的值，表示要渲染的组件的名字-->
      <component :is="comName"></component>
    </div>
  </div>
</template>

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

export default {
  data() {
    return {
      // comName表示要展示的组件的名字
      comName: "Left",
    };
  },
  components: {
    Left,
    Right,
  },
};
</script>

<style lang="less">
</style>

3.2 Izquierda.vue

<template>
  <div class="left-container">
    <h1>Left组件---{
   
   { count }}</h1>
  </div>
</template>

<script>
export default {
  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" scoped>
.left-container {
  width: 100%;
  min-height: 250px;
  background-color: orange;
  text-align: center;
}
</style>

3.3 Derecha.vue

<template>
    <div class="right-container">
        <h1>Right组件---{
   
   {  }}</h1>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.right-container{
    width: 100%;
    min-height: 250px;
    background-color: rgb(0, 162, 255);
    text-align: center;
}
</style>

4, mantener vivo mantener el estado

4.1 Introducción

Vue puede usar keep-alive para mantener el estado cuando se cambia el componente, es decir, cuando se cambia el interruptor, el componente no se destruirá, sino que estará en un estado inactivo y mantendrá el estado original hasta que se reactive.

4.2 Funciones del ciclo de vida

Cuando el componente se almacena en caché, la función de ciclo de vida desactivado del componente se activa automáticamente.
Cuando se activa el componente, la función de ciclo de vida activada del componente se activa automáticamente

4.3 Códigos relacionados

4.3.1 Plantillas

<!-- keep-alive可以把内部的组件进行缓存，而不是销毁组件-->
<keep-alive>
   <component :is="comName"></component>
</keep-alive>

4.3.2 Vista de aplicación

<template>
  <div id="app">
    <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>
        <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: {
    Left,
    Right,
  },
};
</script>

<style lang="less">
</style>

4.4 incluir atributo y excluir atributo

(1) El atributo de inclusión se utiliza para especificar: solo se almacenarán en caché los componentes con nombres coincidentes. Los nombres de varios componentes están separados por comas en inglés.
(2) El atributo de exclusión se utiliza para excluir: especifique qué componentes no necesitan almacenarse en caché a través del atributo de exclusión.
Nota: No es necesario utilizar los dos atributos incluir y excluir al mismo tiempo

<keep-alive include="Left,Right">
    <component :is="comName"></component>
</keep-alive>

5. Al registrar nombres y declaraciones de componentes, el uso de nombre

5.1 Introducción

Cuando se proporciona el atributo de nombre, el nombre del componente es el valor del atributo de nombre.
(1) El escenario de aplicación principal del "nombre registrado" del componente es representar y utilizar el componente registrado en la estructura de la página en forma de etiqueta.
(2) El escenario de aplicación principal del nombre "nombre" cuando se declara el componente: combinar la etiqueta para realizar la función de almacenamiento en caché del componente y ver el nombre del componente en la herramienta de depuración.

5.2 Códigos relacionados

5.2.1 Derecho.vue

<template>
  <div class="right-container">
    <h1>Right组件---{
   
   {}}</h1>
  </div>
</template>

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

<style lang="less" scoped>
.right-container {
  width: 100%;
  min-height: 250px;
  background-color: rgb(0, 162, 255);
  text-align: center;
}
</style>

2. Ranura

1. Introducción

Slot (Slot) es la capacidad proporcionada por vue al contenedor del componente. Permite a los desarrolladores definir piezas no definidas que se espera que los usuarios especifiquen como ranuras al empaquetar componentes.

2. ranura en V (abreviada como: #)

De forma predeterminada, cuando se utiliza el componente, el contenido proporcionado se completará en el espacio denominado predeterminado.
Si desea llenar el contenido en la ranura con el nombre especificado, debe usar el comando v-slot:.
v-slot debe ir seguido del nombre de la ranura. Al mismo tiempo, la directiva v-slot no se puede usar directamente en el elemento, sino que debe usarse en la etiqueta de plantilla. La etiqueta de plantilla es una etiqueta virtual que solo sirve como contenedor, pero no se representará como ningún elemento html sustancial.
La abreviatura de la directiva v-slot es#

3. Código básico relevante

3.1 Vista de la aplicación

<template>
  <div id="app">
    <h1>App组件</h1>
    <hr />

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

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

export default {
  components: {
    // 如果在"声明组件"的时候，没有为组件指定name名称，则组件的名称默认就是“注册时候的名称”
    Left,
    Right,
  },
};
</script>

<style lang="less">
</style>

3.2 Izquierda.vue

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

<script>
export default {}
</script>

<style lang="less" scoped>
.left-container {
  width: 100%;
  min-height: 250px;
  background-color: orange;
  text-align: center;
}
</style>

4. Ranuras con nombre

4.1 Introducción

Un espacio tiene un nombre específico y, si hay varios espacios, se debe asignar un nombre específico a cada espacio.

4.2 Códigos relacionados

4.2.1 Vista de aplicación

<template>
  <div id="app">
    <h1>App组件</h1>
    <hr />
    
    <Article>
      <template v-slot:title>
        <h3>一首诗</h3>
      </template>

      <template #content>
        <div>
          <p>内容区域</p>
        </div>
      </template>

      <template #author>
        <div>
          <p>作者</p>
        </div>
      </template>
    </Article>
    <hr/>
  </div>
</template>

<script>
import Article from "@/components/Article.vue";

export default {
  components: {
    // 如果在"声明组件"的时候，没有为组件指定name名称，则组件的名称默认就是“注册时候的名称
    Article
  },
};
</script>

<style lang="less">
</style>

4.2.2 Vista del artículo

<template>
  <div class="article-container"> 
    <!--文章的标题-->
    <div class="header-box">
        <slot name="title"></slot>
    </div>

    <!--文章的内容-->
    <div class="content-box">
        <slot name="content"></slot>
    </div>

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

  </div>
</template>

<script>
export default {
  // 首字母大写
  name: 'Article'
}
</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>

5. Ranuras de alcance

5.1 Introducción

Al encapsular un componente, proporcione el valor correspondiente a la propiedad reservada, este uso se denomina "ranura de alcance". (alcance)

<template #content="scope">
        <div>
          <p>内容区域</p>
          <p>{
   
   { scope.msg }}</p>
        </div>
</template>

5.2 Códigos relacionados

5.2.1 Vista de aplicación

<template>
  <div id="app">
    <h1>App组件</h1>
    <hr />
    
    <Article>
      <template #content="scope">
        <div>
          <p>内容区域</p>
          <p>{
   
   { scope.msg }}</p>
        </div>
      </template>
    </Article>
    <hr/>
  </div>
</template>

<script>
import Article from "@/components/Article.vue";

export default {
  components: {
    Article
  },
};
</script>

<style lang="less">
</style>

5.2.2 Vista del artículo

<template>
  <div class="article-container"> 
    <div class="content-box">
        <!--在封装组件时，为预留的<slot>提供属性对应的值，这种用法，叫做“作用域插槽”-->
        <slot name="content" msg="hello world"></slot>
    </div>
  </div>
</template>

<script>
export default {
  // 首字母大写
  name: 'Article'
}
</script>

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

5.3 Desestructuración de la asignación de espacios con alcance

5.3.1 Introducción

los valores de propiedad se pueden vincular dinámicamente

5.3.2 Código relacionado (APP.vue)

<template>
  <div id="app">
    <h1>App组件</h1>
    <hr />
    
    <Article>
      <template #content="scope">
        <div>
          <p>内容区域</p>
          <p>{
   
   { scope.msg }}</p>
          <p>{
   
   { scope.user.name }}</p>
          <p>{
   
   { scope.user.age }}</p>
        </div>
      </template>
    </Article>
    <hr/>
  </div>
</template>

<script>
import Article from "@/components/Article.vue";

export default {
  components: {
    Article
  },
};
</script>

<style lang="less">
</style>

5.3.3 Vista del artículo

<template>
  <div class="article-container"> 
    <div class="content-box">
        <!--在封装组件时，为预留的<slot>提供属性对应的值，这种用法，叫做“作用域插槽”-->
        <slot name="content" msg="hello world" :user="userinfo"></slot>
    </div>
  </div>
</template>

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

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

3. Comandos personalizados

1. Introducción

Vue proporciona oficialmente instrucciones comunes como v-text, v-for, v-model, v-if. Además, vue también permite a los desarrolladores personalizar las instrucciones.

2. Comandos personalizados

2.1 Instrucciones personalizadas privadas

En cada componente de vue, se pueden declarar directivas personalizadas privadas en el nodo de directivas.

2.1.1 Uso básico de instrucciones personalizadas privadas

<template>
  <div id="app">
    <h1 v-color>App组件</h1>
    <p v-color>测试</p>
    <hr />
  </div>
</template>

<script>
export default {
  components: {
  },
  directives: {
    // 定义名为color的指令，指向一个配置对象
    color: {
      // 当指令第一次被绑定到元素上的时候，会立即触发bind函数
      // 形参中的el表示当前指令所绑定到的那个DOM对象
      bind(el) {
        console.log("触发了v-color的bind函数")
        el.style.color = 'red'
      },
    },
  },
};
</script>

<style lang="less">
</style>

resultado

2.1.2 Utilice vinculación.valor para obtener el valor vinculado por la instrucción

Cuando una directiva está vinculada a un elemento por primera vez, la función de vinculación se activa inmediatamente

<template>
  <div id="app">
    <h1 v-color = "color">App组件</h1>
    <p v-color = "'green'">测试</p>
    <hr />
  </div>
</template>

<script>

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

<style lang="less">
</style>

resultado

2.1.3 Usar la función de actualización para llamar elementos

La función de actualización se llamará cada vez que se actualice el DOM

<template>
  <div id="app">
    <h1 v-color = "color">App组件</h1>
    <p v-color = "'green'">测试</p>
    <button @click="color='green'">改变color的颜色值</button>
    <hr />
  </div>
</template>

<script>
export default {
  data(){
    return {
      color:'blue'
    }
  },
  components: {
  },
  directives: {
    // 定义名为color的指令，指向一个配置对象
    color: {
      // 在DOM更新的时候，会触发update函数
      update(el, binding){
        console.log("触发了v-color的update函数")
        el.style.color = binding.value
      }
    },
  },
};
</script>

<style lang="less">
</style>

resultado

2.1.4 Taquigrafía de funciones

<template>
  <div id="app">
    <h1 v-color = "color">App组件</h1>
    <p v-color = "'green'">测试</p>
    <button @click="color='green'">改变color的颜色值</button>
    <hr/>
  </div>
</template>

<script>
export default {
  data(){
    return {
      color:'blue'
    }
  },
  components: {
  },
  directives: {
    // 定义名为color的指令，指向一个配置对象
    color(el, binding){
      el.style.color = binding.value
    }
  },
};
</script>

<style lang="less">
</style>

2.2 Instrucciones personalizadas globales

Las directivas personalizadas compartidas globalmente deben declararse mediante "Vue.directive()"

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

Vue.config.productionTip = false

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

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