記事ディレクトリ
ヒント：以下はこの記事の内容です。以下のケースは参照用です
4.スコープスロット
公式ウェブサイト：スロットのコンテンツがサブコンポーネント内のデータにのみアクセスできるようにすると便利な場合があります。
全体的なアーキテクチャは、前の記事のvueスロット01を参照しています。
バックアップの内容を変更したい場合があります。たとえば、Wrapコンポーネントテンプレートの内容は次のとおりです。
App.vue
<Wrap>
//这里为空时填充备用内容
// {
{value}} 这里是获取不到Wrap组件中的value
</Wrap>
Wrap.vue
<h1>wrap</h1>
<slot>
这是slot标签内容备用内容{
{
value}}
</slot>
<p>这是wrap的P标签</p>
<hr />
親のスロットコンテンツで値を使用できるようにするために、要素の属性として値をバインドできます。
注：v-slotはテンプレートにのみ追加でき、値を受け取ったものだけがこのように直接書き込むことができます。
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>
スロットを分解します。
<Wrap v-slot:default="{data}">
{
{
data}}
<Box :title="data"/>
</Wrap>
- パラメータのないvスロットは、デフォルトのスロットに対応すると想定されます。
- デフォルトスロットの省略された構文は、スコープがあいまいになるため、名前付きスロットと混合できないことに注意してください。
- 複数のスロットがある限り、すべてのスロットに常に完全なテンプレートベースの構文を使用してください。
例：
//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>
実行：
5. $ parent、$ children
- $ parentは親コンポーネントインスタンスを取得します（this。$ parentを子コンポーネントで直接使用できます）
- $ childrenは子コンポーネントインスタンスを取得します（これを使用できます。$ childrenは親コンポーネントで直接使用できます）
- コンポーネント内のデータを取得して、データを変更することもできます
//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>
コードは次のとおりです（例）：
クリック
6.再帰コンポーネント
アプリを見る
<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
は、コンポーネントの名前がここに設定された後でのみ、コンポーネント内のテンプレートでコンポーネント自体を呼び出すことができます
<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>
ランニングエフェクトチャート：
