插槽
1.什么插槽
插槽也成為內容分發 用slot這個內置組件
2.插槽是干什么的
在子組件中來顯示父組件中的資料
3.插槽怎么用
4.在子組件中用括起來一個區域
5.在父組件的子組件標簽中給插槽傳遞資料，如果父組件不傳輸資料那6.么直接顯示標簽中的資料
7.插槽的分類
插槽可以分為三類 默認插槽 具名插槽 作用域插槽
默認插槽
只要有位置 就會顯示父組件傳遞來的資料
具名插槽
給slot標簽起名 然后在父組件傳遞資料的時候根據名字查找就行
示例：子組件
<template>
<div>
<h2>
<slot name="one">
這個我子組件預留出來的位置
{{title}}
</slot>
</h2>
<p>我的內容</p>
<section>
插槽的內容
<slot name="two"></slot>
</section>
</div>
</template>
<script>
export default {
data(){
return{
title:'誰'
}
}
}
</script>
父組件
<template>
<div id="app">
<!-- 學生串列 -->
<List>
<template v-slot:one>
<p>這是我的學生資料</p>
<h3>{{name}}</h3>
</template>
<template>
這是串列的標題呢
</template>
</List>
<!-- 教室串列 -->
<List></List>
</div>
</template>
<script>
import List from "@/components/List"
export default {
components:{List} ,
data(){
return{
name:"hello"
}
}
}
</script>
<style></style>
作用域插槽
1.在子組件中給slot系結一個屬性 掛載要傳輸的變數 :屬性名=“變數”
2.在父組件中通過 v-slot:名=“suibian”
3.suibian.屬性名來訪問子組件傳過來的資料
示例：子組件
<template>
<div>
<h2>
<slot name="one" :objuser="obj">
{{obj.firstname}}
</slot>
</h2>
<p>我的內容</p>
<section>
插槽的內容
<slot name="two" :stuobj="stu"></slot>
</section>
</div>
</template>
<script>
export default {
data(){
return{
obj:{firstname:"張",lastname:"三"},
stu:{username:'張三',age:20}
}
}
}
</script>
父組件
<template>
<div id="app">
<!-- 學生串列 -->
<List>
<template v-slot:one="suibian">
<p>這是我的學生資料</p>
<h3>{{suibian.objuser.lastname}}</h3>
</template>
<template v-slot:two="suibian">
{{suibian.stuobj.age}}
</template>
</List>
<!-- 教室串列 -->
<List></List>
</div>
</template>
<script>
import List from "@/components/List"
export default {
components:{List} ,
data(){
return{
name:"hello"
}
}
}
</script>
<style></style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/238033.html
標籤：其他
上一篇：Docker-操作容器
下一篇：某某哲統計學宇宙的Readme