記事ディレクトリ
序文
この記事では、名前付きスロットとスコープ付きスロットの使用法を簡単に紹介します。
1. スロットとは
1. スロットは、親コンポーネントに提供される子コンポーネント内のプレースホルダーです。子コンポーネントでは、< スロット></ スロット > で表されます。親コンポーネントは、このプレースホルダーに HTML などの任意のテンプレート コードを入力できます。 、コンポーネントなどの場合、塗りつぶされたコンテンツはサブコンポーネントの <slot>< /slot > タグを置き換えます。(簡単に言うと、他のコンポーネントが飛び込めるようにサブコンポーネントに穴を掘ることです)
2. バージョン 2.6.0 以降、slot と slot-scope は v-slot に置き換えられます。
3. スロットには、デフォルト スロット、名前付きスロット、スコープ指定スロットが含まれます
2. 事前準備
1、通过vue-cli创建好初始化项目
2、src下创建category.vue，同时在App.vue中引入
3. 名前付きスロットの使用
1. サブコンポーネント構成スロット
子コンポーネントで props を構成し、親コンポーネント App から情報を受け取り、2 つのスロットを準備します。
//category.vue
<template>
<div id="bck">
<h3>{
{
title }}</h3>
//准备两个带有不同name的插槽（可以让使用者在指定的地方显示数据）
<slot name="center">默认插槽1</slot>
<slot name="footer">默认插槽2</slot>
</div>
</template>
<script>
export default {
name: "category",
data() {
return {
};
},
props: ["title", "listData"],
};
</script>
<style scoped>
#bck {
background-color: skyblue;
width: 200px;
height: 300px;
}
h3 {
text-align: center;
background-color: #bfa;
}
</style>
2. ユーザー App.vue 構成データ
サブコンポーネント カテゴリで定義されたさまざまな名前を使用して、データを指定した場所に表示できます。
//App.vue
<template>
<div id="app">
<category title="美食">
<img
slot="center"
src="https://tse2-mm.cn.bing.net/th/id/OIP-C.wwyQPKyRH0ge8-Ppd9DSJgHaEK?w=317&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7"
alt=""
/>
<a slot="footer" href="https://img1.qunarzz.com/travel">更多</a>
</category>
<category title="游戏">
<ul slot="center">
<li v-for="(g, index) in game" :key="index">{
{
g }}</li>
</ul>
<div id="game" slot="footer">
<a href="https://img1.qunarzz.com/travel">单机游戏</a>
<a href="https://img1.qunarzz.com/travel">网络游戏</a>
</div>
</category>
<category title="电影">
<video
slot="center"
width=""
height=""
controls
src="https://v.qq.com/x/cover/mzc00200dwnknik.html"
></video>
<div id="game" slot="footer">
<a href="https://img1.qunarzz.com/travel">更多信息1</a>
<a href="https://img1.qunarzz.com/travel">更多信息2</a>
</div>
</category>
</div>
</template>
<script>
import category from "./components/category";
export default {
name: "app",
data() {
return {
foods: ["麻辣烫", "烧烤", "小青龙", "炸酱面"],
game: ["魔兽世界", "FIFA2016", "NBA2K", "洛克王国"],
};
},
mounted() {
},
methods: {
},
components: {
category,
},
};
</script>
<style scoped>
#app,
#game {
display: flex;
justify-content: space-around;
}
img {
width: 100%;
}
video {
width: 100%;
}
</style>
3. 結果表示
4. 名前付きスロットの概要
1. スロットスロットを定義した後、表示するラベルにslot="name"を追加すると、指定した位置に表示内容を表示できます。この
メソッドのソース ゲームは、子コンポーネント自体ではなく、アプリの親コンポーネントで提供されます。冗長性を減らすために、スコープ付きスロットを使用して、スロット自体を定義するコンポーネントにデータを保存できます。
4 番目、スコープ スロットの使用
- 表示されるデータがスロットを定義するグループ価格に配置される必要があります
- 親コンポーネント App.vue はデータに基づいて構造を生成するだけであり、データはスロットを定義するコンポーネントで提供されます。
1. サブコンポーネント構成スロット
子コンポーネントで構成された Props はヘッダーを受け取るだけで済みます。2 つのスコープ付きスロットを準備し、表示するデータを運びます。
//category.vue
<template>
<div id="bck">
<h3>{
{
title }}</h3>
<slot :G="games" :F="foods">作用域插槽</slot>
</div>
</template>
<script>
export default {
name: "category",
data() {
return {
foods: ["麻辣烫", "烧烤", "小青龙", "炸酱面"],
games: ["魔兽世界", "FIFA2016", "NBA2K", "洛克王国"],
};
},
props: ["title"],
};
</script>
<style scoped>
#bck {
background-color: skyblue;
width: 200px;
height: 300px;
}
h3 {
text-align: center;
background-color: #bfa;
}
</style>
2. ユーザーはデータを受け取り、構造を設定します
//App.vue
<category title="游戏">
<template scope="zwt">
<!--ES6解构赋值，{
}直接拿到zwt.G的值 -->
<ul>
<li v-for="(g, index) in zwt.G" :key="index">{
{
g }}</li>
</ul></template
>
</category>
<category title="美食">
<template scope="{F}">
<!--ES6解构赋值，{
}直接拿到zwt.F的值 -->
<ol >
<li v-for="(f, index) in F" :key="index">{
{
f}}</li>
</ol>
</template>
</category>
3. 結果表示
4. スコープスロットの概要
1. ユーザーコンポーネントに表示するデータがない問題を解決し、他のコンポーネントからデータを呼び出すときに使用できます。
2. スロットを定義するコンポーネントは自身のデータをユーザーに送信し、ユーザーはデータを受信した後に構造を設定します。
3. ユーザーは生成される構造スタイルを決定するだけで、データはユーザー (スロットを定義するコンポーネント) から送信されます。
スロットとは、親コンポーネントが子コンポーネントの指定された位置に特定の構造を挿入することを意味することが理解できる。