No Vue, quando chamamos um subcomponente, podemos modificar uma certa parte do código do subcomponente, para que o subcomponente possa atender melhor às nossas necessidades. Com a tecnologia de slot, podemos fazer com que a estrutura do componente filho se adapte melhor ao componente atual quando o componente pai é chamado.
Tecnologia de slot:
1. Slot padrão (slot anônimo):
O slot é relativamente pesado e adequado para uma inserção simples e contínua. O conteúdo do modelo do modelo será inserido no marcador de posição. Se houver vários marcadores de posição, o conteúdo do modelo será inserido uma vez.
// 父组件
<div>这是父组件
<Younger :list="list">
<template>
<span>要插入的内容</span>
</template>
</Younger>
</div>
data: function() {
return {
list: [1,2,3,4]
};
},
components: {
Younger
},
// 子组件
我是子组件
<ul>
<li v-for="item in list">
<span v-text="item"></span>
<slot></slot>
</li>
<slot></slot>
</ul>
// 插槽执行后的html结构
<div>这是父组件
我是子组件
<ul>
<li v-for="item in list">
<span v-text="item"></span>
<span>要插入的内容</span>
</li>
<span>要插入的内容</span>
</ul>
</div>resultado da operação:
2. Espaço nomeado:
Atribua ao slot de espaço reservado um atributo de nome. Quando o componente pai é chamado, o template template deve usar o atributo v-slot: name para especificar a inserção de um slot específico. O template sem v-slot é considerado o slot padrão e não pode ser inserido no slot nomeado.
v-slot: [nome do slot dinâmico], também pode ser abreviado, por exemplo, v-slot: header é igual a #header.
// 父组件
这是父组件
<Younger :list="list">
<template v-slot:one>
<span>这是插槽：one要插入的内容</span>
</template>
<template v-slot:two>
<span>这是插槽：two要插入的内容</span>
</template>
<template>
<span>这是插槽：two要插入的内容</span>
</template>
</Younger>
// 子组件
我是子组件
<ul>
<li v-for="item in list">
<span v-text="item"></span>
<slot name="one"></slot>
</li>
<slot name="two"></slot>
</ul>resultado da operação:
3. Espaço de escopo:
Às vezes, precisamos passar valores aos slots nos subcomponentes para exibi-los. O processo é que o componente pai primeiro passa dados de valor para o componente filho, e também precisamos usar esse valor no modelo do componente pai, mas não podemos usar diretamente os dados no componente pai, o que fará com que ele estar fora de sincronia. A melhor maneira é deixar o componente filho passar os dados para o template do template, e então podemos aceitar o valor dos dados e chamá-lo. Observação: o valor passado pelo componente filho é um objeto e o nome da chave é modelo.
// 父组件
这是父组件
<Younger :list="list">
<template slot-scope="{ model }">
<span>这是插槽：one要插入的内容</span> |
<span>传过来的值为：{
{model}}</span>
</template>
</Younger>
// 子组件
我是子组件
<ul>
<li v-for="item in list">
<span v-text="item"></span>
<slot :model="item"></slot>
</li>
</ul> Os resultados da operação são:
Resumindo, um slot é um espaço reservado para o componente filho se preparar para o componente pai. O componente pai pode escrever qualquer código no modelo para substituir este espaço reservado. Isso pode tornar o código mais elegante.