Directorio de artículos
Sugerencia: El siguiente es el contenido de este artículo, los siguientes casos son para referencia
4. Ranura de alcance
Sitio web oficial: a veces es útil permitir que el contenido de la ranura acceda a datos que solo están disponibles en subcomponentes.
La arquitectura general se refiere a la ranura vue 01 en el artículo anterior.
A veces, desea cambiar el contenido de la copia de seguridad. Por ejemplo, el contenido de la plantilla del componente Wrap es el siguiente:
App.vue
<Wrap>
//这里为空时填充备用内容
// {
{value}} 这里是获取不到Wrap组件中的value
</Wrap>
Wrap.vue
<h1>wrap</h1>
<slot>
这是slot标签内容备用内容{
{
value}}
</slot>
<p>这是wrap的P标签</p>
<hr />
Para que el valor esté disponible en el contenido de la ranura principal, podemos vincular el valor como un atributo del elemento :
Nota: la ranura v solo se puede agregar a la plantilla, y solo aquellos que reciben el valor en ella pueden escribir directamente así
App.vue
<h1>wrap</h1>
//注意v-slot只能添加在template上，只有在里面接收值的可以这样直接写
<Wrap v-slot:default="wrapValue">
{
{
wrapValue}}
<Box :title="wrapValue.data"/> //Box组件也可以获取到这个值
</Wrap>
Wrap.vue
<h1>wrap</h1>
<slot :data="value"> //进行绑定
这是slot标签内容备用内容{
{
value}}
</slot>
<hr />
<script>
export default {
data() {
return {
value: "wrap-value",
}
},
};
</script>
Box.vue
<h2>Box</h2> {
{
title}}
<script>
export default {
props: {
title: String,
}
};
</script>
Deconstruye la ranura:
<Wrap v-slot:default="{data}">
{
{
data}}
<Box :title="data"/>
</Wrap>
- Se supone que la ranura en V sin parámetros corresponde a la ranura predeterminada:
- Tenga en cuenta que la sintaxis abreviada de la ranura predeterminada no se puede mezclar con la ranura nombrada, porque hará que el alcance sea ambiguo
- Siempre que haya varios espacios, utilice siempre la sintaxis completa basada en plantillas para todos los espacios.
Ejemplo:
//Wrap.vue
<template>
<div class="wrap">
<h1>wrap</h1>
<slot :data="value">
这是slot标签内容备用内容{
{
value}}
</slot>
<slot name="list" :data="list" />
<hr />
</div>
</template>
<script>
export default {
data() {
return {
value: "wrap-value",
list:[1,2,3,4]
};
},
};
</script>
//App.vue
<template>
<div id="app">
app
<Wrap>
<template v-slot:defalut="{ data }">
<Box :title="data" />
</template>
<template v-slot:list="{ data }">
<ul>
<li v-for="(item, index) in data" :key="index">
{
{
item }}
</li>
</ul>
</template>
</Wrap>
</div>
</template>
<script>
import Wrap from "./components/Wrap";
import Box from "./components/Box";
export default {
components: {
Wrap,
Box,
}
};
</script>
correr:
5. $ padre, $ hijos
- $ parent obtiene la instancia del componente principal (puede usar esto. $ parent directamente en el componente secundario)
- $ children obtiene la instancia del componente secundario (puede usar this. $ children directamente en el componente principal)
- También puede obtener los datos en el componente y modificar los datos
//App.vue
<template>
<div id="app">
app
<Wrap ref="wrap">
<Box />
<h1>test</h1>
<Foo />
</Wrap>
</div>
</template>
<script>
import Wrap from "./components/Wrap";
import Box from "./components/Box";
import Foo from './components/Foo'
export default {
components: {
Wrap,
Box,
Foo
}
};
</script>
Wrap.vue
<template>
<div class="wrap" :style="{ background: bgColor }">
<h1>wrap value: {
{
value }}</h1>
<slot />
</div>
</template>
<script>
export default {
data() {
return {
value: "hello",
bgColor: "green",
};
},
methods: {
setBgColor() {
this.bgColor = "#ddd";
},
},
mounted() {
console.log(this.$children);
},
};
</script>
<style>
.wrap {
padding: 40px;
background: red;
}
</style>
Box.vue
<template>
<div class="box">
<h2>box</h2>
<button @click="modifyAction">按钮</button>
</div>
</template>
<script>
export default {
mounted(){
console.log(this.$parent);
},
methods: {
modifyAction(){
console.log(this.$parent.value) //获取父组件的数据
console.log(this.$parent.bgColor)
this.$parent.value = 'hi!'
console.log(this.$parent.value)
this.$parent.setBgColor();
console.log(this.$parent.bgColor);
}
}
}
</script>
<style>
.box{
background: yellow;
}
</style>
El código es el siguiente (ejemplo):
Haga clic en
6. Componentes recursivos
Ver aplicación
<template>
<div id="app">
app
<demo :value="5" />
</div>
</template>
<script>
import Demo from "./components/Demo";
export default {
components: {
[Demo.name]: Demo,
},
};
</script>
Demo.vue
puede llamar al componente en sí en la plantilla dentro del componente solo después de que el nombre del componente se establezca aquí
<template>
<div class="demo" :style="{background:`rgb(${r},${g},${b})`}">
<button v-if="value>1" @click="showAction">按钮</button>
<demo v-if="isShow && value>1" :value="value-1" />
</div>
</template>
<script>
export default {
//只有在这里设置了组件的名字后，才能在组件内部的template中调用组件自身
name:'demo',
props:{
value:Number,
},
data(){
return{
r:Math.random()*255,
g:Math.random()*255,
b:Math.random()*255,
isShow:false,
}
},
methods:{
showAction(){
this.isShow=!this.isShow;
}
}
}
</script>
<style>
.demo{
padding: 20px;
border: 1px solid #ddd;
}
</style>
Tabla de efectos en ejecución:
