Slot
- O slot do componente é para tornar os componentes que encapsulamos mais escalonáveis
- Permitir que os usuários decidam o que exibir no componente
- O método de encapsular o soquete: extraia a comunalidade e mantenha a diferença
- A melhor maneira de encapsular é extrair pontos em comum em componentes e expor as diferenças como slots
- Uma vez que o slot é reservado, os usuários podem decidir o que inserir no slot de acordo com suas necessidades
- A função do slot é misturar o conteúdo do componente pai com o modelo do próprio componente filho
<div id='father'>
<h1>{
{ name }}</h1>
<son></son>
</div>
<template id='son'>
<div>
<h1>{
{ name }}</h1>
</div>
<template>
const son = {
template:'#son',
data() {
return {
name:'我是儿子'
}
}
}
const father = new Vue({
el:"#father",
data:{
name:'我是爹'
},
components:{
son }
})
Imprima na página e veja. É
bom, pai e filho estão fora.
Quando usamos nosso filho, usamos assim
<div id='father'>
<!-- 省略 -->
<son></son>
</div>
No entanto, se escrevermos dessa forma, essa sequência de texto pode aparecer?
<son>插槽要来了插槽要来了</son>
Imprima
-
Na verdade, a razão pela qual ele não pode aparecer, também sabemos que quando a página é renderizada, o componente filho, ou seja, a tag do modelo, substitui a tag filho que está sendo usada, para que a string de texto não apareça.
-
Isso obviamente não está de acordo com a ideia de reutilização de componentes
-
Não tenha medo, irmã entra vai te ensinar como fazer
-
Na verdade, é muito simples, só precisamos fazer isso
<template id="son">
<div>
<h1>{
{ name }}</h1>
<slot></slot>
</div>
</template>
- Depois de adicionar a etiqueta de slot, a sequência de texto pode ser exibida
- Irmãos que adoram aprender devem ter aberto o NetEase Youdao Dictionary. Na verdade, a palavra slot significa localização e slot significa
Imprima na página para ver
Slot nomeado
-
Como o nome indica, é um slot com um nome
-
No código acima, se eu definir três slots para o subcomponente, onde a string de texto é inserida?
-
Primeiro envolva a string de texto com p tags
<div di='father'>
//...
<son><p>插槽要来了</p></son>
</div>
<template id="son">
<div>
<h1>{
{ name }}</h1>
<slot></slot>
<slot></slot>
<slot></slot>
</div>
</template>
A prática é o único critério para testar a verdade, nós a imprimimos na página para ver
- Pode-se ver que existem três slots em nossa etiqueta filho, mas apenas um plugue (etiqueta p) é fornecido
- Este plugue se conectará a todos os soquetes
- Também damos a ele três plugues
<div id="father">
<h1>{
{ name }}</h1>
<son>
<p>我是下面的白熊</p>
<p>我是上面的棕熊</p>
<p>我是中间的熊猫</p>
</son>
</div>
A irmã entra gosta dos nossos ursos nus. A propósito, vou dar-lhe um Amway.
Imprima na página para ver
- Pode-se ver que essas três tags p foram reutilizadas três vezes
- Então, como evitar essa situação e fazer os três ursos se empilharem em ordem?
- Neste momento, você pode usar o slot nomeado
<div id="father">
<h1>{
{ name }}</h1>
<son>
<p slot='bottom'>我是下面的白熊</p>
<p slot="top">我是上面的棕熊</p>
<p slot="center">我是中间的熊猫</p>
</son>
</div>
<template id="son">
<div>
<h1>{
{ name }}</h1>
<slot name='top'></slot>
<slot name='center'></slot>
<slot name='bottom'></slot>
</div>
</template>
- Adicione o atributo de nome ao slot de slot do componente filho
- Adicione o atributo slot ao rótulo usado pelo componente pai
- Se os dois atributos forem iguais, ele será inserido no slot correspondente
Dê uma olhada no efeito da página
Rótulo padrão do slot
- Ao usar slots nomeados, você também pode definir um rótulo padrão
- Por exemplo, eu queroinferiorDefina um valor padrão no slotbotãoBotão
- Quando ninguém está conectado neste slot,botãoVai aparecer
- Pode ser escrito assim
<!-- <p slot='bottom'>我是下面的白熊</p> -->
<slot name='bottom'><button>按钮</button></slot>
Dê uma olhada no efeito da página
Onde estão os dados para o slot
- Quando você usa uma variável em um componente, você primeiro verá em qual modelo a variável está e usará a variável na instância Vue do modelo correspondente
Deixe o urso branco seguir umnum
<p slot='bottom'>我是下面的白熊{
{ num }}</p>
noComponente filhoDefina um emnumValor é50
const son = {
template:"#son",
data() {
return {
name:'我是儿子',
num:50
}
}
}
noComponente papaiDefina um emnumValor é10
const father = new Vue({
el:'#father',
data:{
name:'我是爹',
num:10
},
components:{
son }
})
Então a pergunta é: qual número o urso branco usará?
Imprima na página para ver
