插槽心软,占位符
slot
具名插槽癞蚕,指定占位符slot
蕊爵、name
作用域插槽,子組件占位符向父組件占位符通信涣达。slot
在辆、slot-scope
- 子組件:
<template>
<div>
<!-- 普通插槽 -->
<slot></slot>
<!-- 具名插槽 -->
<slot name="name"></slot>
<!-- 作用域插槽和具名插槽 -->
<ul>
<!-- row = {item[0], {item[i]}},其中,row自定義屬性度苔,將要傳到父組件里面匆篓,通過slot-scope進行接受 -->
<slot
v-for="item in [
{ name: '作用域插槽:' },
{ content: 'slot-scope屬性接受子組件導(dǎo)出的數(shù)據(jù),實現(xiàn)子組件里面的插槽向父組件通信' }]"
:row="item"
name="more"
></slot>
</ul>
</div>
</template>
- 父組件:
<template>
<div>
<my-son>
<template>
<h3>插槽:占位符</h3>
</template>
<template slot="name">
<h3>具名插槽寇窑,制定name屬性的占位符</h3>
</template>
<!-- scope = { row },其中鸦概,slot-scope接受子組件傳遞過來的參數(shù) -->
<template slot="more" slot-scope="scope">
<b>{{ scope.row.name }}</b>
<span>{{ scope.row.content }}</span>
</template>
</my-son>
</div>
</template>
<script>
import mySon from "./pages/son";
export default {
components: {
mySon,
},
};
</script>