ranura vue2: ranura, ámbito de ranura, ranura en V

1. Tragamonedas en vue

1.1 El problema a resolver por la ranura en vue

La ranura ranura se utiliza en componentes para distribuir contenido a los componentes. Su contenido puede contener cualquier cosa 模板代码, incluso HTML. Resolverá los siguientes problemas:

<template>
  <div>
    <p>buttonTest</p>
    <my-button>
      <!-- 处于自定义标签中的内容，如何呈现 -->
      button
    </my-button>
  </div>
</template>
<script>
import MyButton from "./MyButton.vue";

export default {
      
      
  components: {
      
      
    "my-button": MyButton,
  },
  props: {
      
      },
  data() {
      
      
    return {
      
      };
  },
  methods: {
      
      },
};
</script>

En 自定义组件, 标签中间的内容cómo renderizar.

1.2 Desarrollo de tragamonedas en vue

En vue 2.6.0, las ranuras con nombre y las ranuras con ámbito introducen una nueva sintaxis unificada (es decir, v-slotdirectiva). Reemplaza sloty , slot-scopedos características actuales 已被废弃但未被移除y aún útiles. Pero vue 3estos dos quedarán obsoletos en , 不会被支持即无效.

2. Tragamonedas anónimas

<template>
  <div>
    <!-- slot里面也可以设置内容，这个可以设置不传内容时，slot有个默认值替换 -->
    <slot>这里面是slot的默认值</slot>
  </div>
</template>
<script>
export default {
      
      
  name: "MyButton",
  props: {
      
      },
  data() {
      
      
    return {
      
      };
  },
  methods: {
      
      },
};
</script>

<template>
  <div>
    <p>buttonTest</p>
    <my-button>
      button
    </my-button>
  </div>
</template>
<script>
import MyButton from "./MyButton.vue";

export default {
      
      
  name: "HelloWorld",
  components: {
      
      
    "my-button": MyButton,
  },
  props: {
      
      },
  data() {
      
      
    return {
      
      };
  },
  methods: {
      
      },
};
</script>

• El método anónimo se refiere a enviar la 引用组件hora a la ubicación de la página del componente .里面传的内容全部一起<slot></slot>
• Mientras haya en el componente <slot></slot>, y 不管有多少个lo hará 全部渲染为传过来的内容. Significa que si hay más de uno <slot></slot>, entonces el contenido pasado será 渲染多次.
• <slot></slot>También puede establecer el contenido en el interior, que es para asegurarse de que haya uno cuando se introduzca el componente 默认值. Por supuesto, <slot></slot>está bien no configurar el contenido en él, por lo que simplemente no hay un valor predeterminado, sí 不会报错.
• El contenido entregado también puede ser dinámico.
• Si el contenido pasado, 没有slot 来接收entonces, el contenido pasado será 被抛弃掉, 不会起作用.

3. Ranuras con nombre

<template>
  <div>
    <slot name="icon"></slot>
    <slot name="content"></slot>
  </div>
</template>
<script>
export default {
      
      
  name: "MyButton",
  props: {
      
      },
  data() {
      
      
    return {
      
      };
  },
  methods: {
      
      },
};
</script>

<template>
  <div>
    <p>2.6.0以前的写法</p>
    <my-button>
      <!--2.6.0以前的写法-->
      <template slot='icon'>
        +
      </template>
      <template slot='content'>
        新建
      </template>
    </my-button>
    <p>--------------------------------------------</p>
    <p>2.6.0之后的写法</p>
    <my-button>
      <!--2.6.0之后的写法-->
      <template v-slot:icon>
        +
      </template>
      <template v-slot:content>
        新建
      </template>
    </my-button>
  </div>
</template>
<script>
import MyButton from "./MyButton.vue";

export default {
      
      
  name: "HelloWorld",
  components: {
      
      
    "my-button": MyButton,
  },
  props: {
      
      },
  data() {
      
      
    return {
      
      };
  },
  methods: {
      
      },
};
</script>

La ranura con nombre es asignar un nombre a la ranura y luego corresponder uno por uno

• Versiones anteriores a la 2.6.0
  1. Si la página que presenta el componente tiene varios contenidos, debe envolverse templatecon y agregar slotel atributo y 自定义值.
  2. slot 的值<slot name='xxx'></slot> name的值Tiene que corresponder al componente .
  3. Si 剩下的内容no se ajusta y especifica, el contenido se representará en 所有的 <slot></slot>la ubicación del componente.
  4. Si slot 设置为defaulty name 设置为default, entonces 和没设置slot与name是一样的.
  5. En comparación con vue 2.6.0las ranuras nombradas en el futuro, solo es necesario cambiarlas a , , , .templateslot='xxx' v-slot:xxx等号改成了冒号并且值没有引号带引号反而会报错
  6. Las ranuras con nombre solo necesitan corresponder name值a slot的值la ranura 顺序是没有关系的.
• Versiones posteriores a la 2.6.0
  1. v-slotSolo se puede usar en componentes componento template, y se usará en etiquetas como divop报错
  2. slot=' xxx 'cambiado v-slot:xxx, y冒号后面这个名称不能打引号
  3. El contenido de la página del componente slotno cambia.
  4. Después de 2.6.0, la ranura nombrada v-slot:headerse puede abreviar como #header, ¡debe tener 参数la capacidad de escribir de esta manera! #= "xxx " Esto no es posible, #default = 'xxx'esta es la única manera.

4. Ranura para mira telescópica

<template>
  <div>
    <!--这里最重要的是 :anyName=value，anyName也是可以随便取的，表示要传过去的值-->
    <slot name="icon" :anyName="defaultConfig"></slot>
    <!--这里最重要的是 :anyName=value，anyName也是可以随便取的，表示要传过去的值-->
    <slot name="content" :anyName="defaultConfig"></slot>
  </div>
</template>
<script>
export default {
      
      
  name: "MyButton",
  props: {
      
      },
  data() {
      
      
    return {
      
      
      defaultConfig: {
      
      
        icon: "+",
        content: "新建",
      },
    };
  },
  methods: {
      
      },
};
</script>

<template>
  <div>
    <p>2.6.0以前的写法</p>
    <my-button>
      <!--这里的anyName对应 slot 中传值 :name=value 中的 name-->
      <template slot="icon" slot-scope="{ anyName }">
        {
   
   { anyName.icon }}
      </template>
      <!--这里的obj是随便取的名称，不与任何地方对应-->
      <template slot="content" slot-scope="obj">
        {
   
   { obj.anyName.content }}
      </template>
    </my-button>
    <p>--------------------------------------------</p>
    <p>2.6.0之后的写法</p>
    <my-button>
      <!--这里的anyName对应 slot 中传值 :name=value 中的 name-->
      <template v-slot:icon="{ anyName }">
        {
   
   { anyName.icon }}
      </template>
      <!--这里的obj是随便取的名称，不与任何地方对应-->
      <template v-slot:content="obj">
        {
   
   { obj.anyName.content }}
      </template>
    </my-button>
  </div>
</template>
<script>
import MyButton from "./MyButton.vue";

export default {
      
      
  name: "HelloWorld",
  components: {
      
      
    "my-button": MyButton,
  },
  props: {
      
      },
  data() {
      
      
    return {
      
      };
  },
  methods: {
      
      },
};
</script>

• Versiones anteriores a la 2.6.0
  1. Las ranuras con ámbito se utilizan principalmente 使用子组件的任何数据para lograr 自定义显示内容el propósito de
  2. El paso más importante de las ranuras con ámbito es que, <slot></slot>si 绑定数据, 没有绑定数据el componente principal recibe solo un objeto vacío {}.
  3. Vincular datos en ranuras con ámbito <slot></slot>, puede ser 写死的o puede ser 动态绑定的. Si está enlazado dinámicamente, también necesitav-bind:xxx
  4. Los datos enlazados en la ranura del alcance <slot></slot>también pueden pasar un definido有返回值的 methods 方法
  5. Una vez <slot></slot>enlazados los datos, 引用组件的地方el contenido enviado se puede pasar slot-scopea través de 获取. obtenido 内容, es一个对象
  6. slot-scopeExpresiones aceptables 任何有效que pueden aparecer en posiciones de parámetros de definiciones de funciones JavaScript .
• Versiones posteriores a la 2.6.0
  1. 两个属性 合并se convirtió en uno v-slot:插槽名称='传过来的值'.
  2. El contenido de la página del componente slotno ha cambiado.
  3. v-slotNo debe usarse htmlen etiquetas.
  4. En caso afirmativo 默认插槽, se puede escribir como v-slot='xxx'.

5. Nombre de la ranura dinámica

Los parámetros de directiva dinámica también se pueden usar v-slotpara definir 动态的插槽名:

    <base-layout>
      <template v-slot:[dynamicSlotName]>
        ...
      </template>
    </base-layout>

6. Asignación de deconstrucción del contenido de la tragamonedas

v-slotJavaScriptEl valor de es aceptable siempre que satisfaga la expresión definida por el parámetro de función . Por lo tanto, en entornos compatibles (navegadores de archivo único o modernos), también puede ES2015 解构语法extraer contenido interpolado específico con, por ejemplo:

<template>
  <div>
    <slot name="icon" :anyName="defaultConfig"></slot>
    <slot name="content" :anyName="defaultConfig"></slot>
  </div>
</template>
<script>
export default {
      
      
  name: "MyButton",
  props: {
      
      },
  data() {
      
      
    return {
      
      
      defaultConfig: {
      
      
        add: {
      
      
          icon: "+",
          content: "新建",
        },
      },
    };
  },
  methods: {
      
      },
};
</script>

<template>
  <div>
    <my-button>
      <template v-slot:icon="{ anyName }">
        {
   
   { anyName.add.icon }}
      </template>
      <template v-slot:content="{ anyName: { add } }">
        {
   
   { add.content }}
      </template>
    </my-button>
  </div>
</template>
<script>
import MyButton from "./MyButton.vue";

export default {
      
      
  name: "HelloWorld",
  components: {
      
      
    "my-button": MyButton,
  },
  props: {
      
      },
  data() {
      
      
    return {
      
      };
  },
  methods: {
      
      },
};
</script>

7. Comparación de versiones anteriores y posteriores a la 2.6.0

	Versiones anteriores a la 2.6.0	Versiones posteriores a la 2.6.0
ranura anónima	Componente principal: <template>content<template> Componente secundario:<slot></slot>	Componente principal: <template>content<template> Componente secundario:<slot></slot>
ranura con nombre	Componente principal: <template slot="slotName"><template> Componente secundario:<slot name="slotName"></slot>	Componente principal: <template v-slot:slotName><template> Componente secundario: <slot name="slotName"> Taquigrafía:<template #slotName><template>
Ranuras con alcance	Componente principal: <template slot="slotName" slot-scope="obj"><template> Componente secundario:<slot name="slotName" :anyName="data"></slot>	Componente principal: <template v-slot:slotName="obj"><template> Componente secundario: <slot name="slotName" :anyName="data"></slot> Taquigrafía:<template #slotName="obj"><template>
ubicación utilizada	Se puede utilizar en cualquier etiqueta, como:<p slot="slotName" slot-scope="data">{ { data }}</p>	Sólo se puede utilizar en componentes componentotemplate

referencia

• vue: ranura, ámbito de ranura y uso de ranuras después de la versión 2.6
• Vue 3.0 y Vue 2.6+ ranura en V que necesita saber
• Tutorial oficial de Vue.js v2.x: tragamonedas
• Vue – Slot (v-slot) – uso/tutorial/ejemplo