スロットの役割: 親コンポーネントが構造を子コンポーネントに渡す
スロット利用の2ステップ
最初のステップ: 子コンポーネントでスロットのデフォルト値を定義します。親コンポーネントが渡されない場合、デフォルトで表示されます。
ステップ 2: 親コンポーネントで構造体を渡します: <子コンポーネント>親コンポーネントが渡す必要がある構造体</子コンポーネント>
1. スロット匿名スロット
- サブコンポーネントのグッズ.vue
<template>
<div class="son">
<h3>我是子组件</h3>
<h4>商品名称</h4>
<!-- 插槽：可以让父组件决定这里放什么。 也可以设置默认值 -->
<slot>我是默认值</slot>
</div>
</template>
<script>
export default {
name: "goods",
data() {
return {}
}
}
</script>
<style scoped>
.son {
border: 1px solid red;
}
</style>
- 親コンポーネント App.vue
<template>
<div id="app">
<h1>我是父组件</h1>
<!-- 子组件1：插入购买链接 -->
<goods>
<button>
<a href="http://www.jd.com">点击购买</a>
</button>
</goods>
<!-- 子组件2：插入禁用点击的按钮 -->
<goods>
<button disabled>已卖完</button>
</goods>
<!-- 子组件3：没有插入内容，则显示默认插槽 -->
<goods></goods>
</div>
</template>
<script>
//导入局部组件
import goods from "./components/goods.vue"
export default {
data() {
return {}
},
components: {
goods
}
}
</script>
<style>
#app {
border: 1px solid #000;
}
</style>
概要: 匿名スロットで使用されるスロットには「名前」がなく、親コンポーネントで渡されるすべての HTML 構造は予約なしで子コンポーネントのスロットに渡されます。
2. 名前付きスロット
名前付きスロットの構文:
1. サブコンポーネントに name 属性を追加します: name="スロット名"
- 親コンポーネントは v-slot: スロット名: を使用して、指定されたスロットに構造体を渡します。
- 注: このv スロット命令はラベルに記述する必要があります。そうしないと、エラーが報告されます。
- これは HTML5 の新しいセマンティック タグであり、テンプレートを意味します。タグ自体は表示されないため、ページ上では非表示になります。このタグは、空のボックス コンテナーである div に似ています。div との唯一の違いは、レンダリングされないことです。
名前付きスロット ロール: 親コンポーネントは複数の HTML 構造を子コンポーネントに渡します。
異なるコンテンツを異なるスロットに配信する
サブコンポーネント: cell.vue
<template>
<div class="cell">
<div class="title" >
<slot name="a">我是标题</slot>
</div>
<div class="content" >
<slot name="b">我是内容</slot>
</div>
<div class="right" >
<slot name="c">我是图标</slot>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style>
.cell{
border: 1px solid #f00;
height: 60px;
padding: 10px;
position: relative;
}
.title{
float: left;
}
.content{
position: absolute;
bottom: 10px;
left: 10px;
}
.right{
float: right;
}
</style>
app.vue
<template>
<div id="app">
<h1>我是父组件</h1>
<cell>
<template v-slot:a>
<strong>我是h3</strong>
<span>标题内容</span>
</template>
<template v-slot:b>
<a href="#">我是链接</a>
</template>
<template #c>
<button>我是按钮</button>
</template>
</cell>
</div>
</template>
<script>
//导入局部组件
import cell from "./components/cell.vue"
export default {
data() {
return {}
},
components: {
cell
}
}
</script>
<style>
#app {
border: 1px solid #000;
}
</style>
3. スコープスロット
スコープ付きスロットの構文は次のとおりです。
1. カスタム属性をサブコンポーネントに追加します: <slot: 属性名 = "属性値">
2. データを受信するために v-slot 属性を親コンポーネントに追加します。
親コンポーネントは、子コンポーネントの内部データ構文 (オブジェクト名.プロパティ名) を使用します。
スコープスロットの役割:
親コンポーネントが子コンポーネントにスロットを渡すと、子コンポーネント内のデータが使用できるようになります。
app.vue
<template>
<div>
<!--
1.匿名插槽 : 父组件传递 一个html结构 给子组件
(1)子组件: <slot> 插槽默认内容 </slot>
(2)父组件: <子组件> html结构 </子组件>
2.具名插槽 : 父组件传递 多个html结构 给子组件
(1)子组件: 给插槽添加一个name(插槽名)
<slot name="插槽名"> 插槽默认内容 </slot>
(2)父组件: 使用 v-slot:插槽名 或 #插槽名
<子组件>
<template v-slot:插槽名>
html结构
</template>
</子组件>
3.作用域插槽: 子组件传递 数据 给父组件插槽
(1)子组件 : 给<slot>内置组件添加自定义属性
<slot 属性名="属性值" > 插槽默认内容 </slot>
(2)父组件 : 使用 v-slot="对象名"
-->
<scope>
<template v-slot="obj">
<p>{
{ obj.a }}</p>
<p>{
{ obj.b }}</p>
<p>{
{ obj.c }}</p>
</template>
</scope>
</div>
</template>
<script>
//导入局部组件
import scope from './components/scope.vue'
export default {
//注册组件
components: {
scope
},
data() {
return {
}
},
};
</script>
<style>
#app {
border: 1px solid #000;
}
</style>
スコープ.vue
<template>
<div class="box">
<h2>学习作用域插槽</h2>
<input v-model="msg" type="text" placeholder="输入搜索内容">
<br>
<!-- 定义插槽 -->
<slot a="1" b="2" :c="msg"> 插槽默认内容 </slot>
</div>
</template>
<script>
export default {
data() {
return {
msg:''
}
},
}
</script>
<style scoped>
.box{
border: 1px solid #000;
}
</style>