單個插槽
主頁面：
<template>
<div class="home">
主頁面
<ADD>
<p>我是擦插入到A頁面的元素</p>
<p>插入到A頁面的元素</p>
</ADD>
</div>
</template>
<script>
import ADD from '@/components/A'
export default {
name: 'home',
data() {
return {}
},
components: {
ADD
}
}
</script>
子頁面：
<template>
<div class="A">
A頁面
<slot></slot>
</div>
</template>
<script>
export default {
name: 'A'
}
</script>
單個插槽
首頁給子頁面加上slot反璃，到主頁面進(jìn)入子頁面矫户，并在主頁的子組件添加內(nèi)容
具名插槽
主頁面：
<template>
<div class="home">
主頁面
<ADD>
<template v-slot:AAA>
<h1>我叫AAA</h1>
</template>
<template v-slot:BBB>
<h1>我叫BBB</h1>
</template>
</ADD>
</div>
</template>
<script>
import ADD from '@/components/A'
export default {
name: 'home',
data() {
return {}
},
components: {
ADD
}
}
</script>
子頁面：
<template>
<div class="A">
<b>子頁面</b>
<slot name="AAA"></slot>
<slot name="BBB"></slot>
</div>
</template>
<script>
export default {
name: 'A'
}
</script>
具名插槽
就是給插槽起個名字者娱，這樣子組件就可以同時有多個插槽
在子組件中給每個slot插槽有一個屬性name
然后在父組件中用template標(biāo)簽配合v-slot屬性來接收響應(yīng)
作用域插槽(就是子傳父傳的數(shù)據(jù))
主頁面：
<template>
<div class="home">
主頁面
<ADD>
<template v-slot:AAA="{dataMsg}">
<h1>我叫AAA</h1>
<p>{{dataMsg}}</p>
</template>
<template v-slot:BBB="{dataMessage}">
<h1>我叫BBB</h1>
<p>{{dataMessage}}</p>
</template>
</ADD>
</div>
</template>
<script>
import ADD from '@/components/A'
export default {
name: 'home',
data() {
return {}
},
components: {
ADD
}
}
</script>
子頁面：
<template>
<div class="A">
<b>子頁面</b>
<slot name="AAA" :dataMsg="msg"></slot>
<slot name="BBB" :dataMessage="message"></slot>
</div>
</template>
<script>
export default {
name: 'A',
data() {
return {
msg: '子組件傳父組件數(shù)據(jù)1',
message: '子組件傳父組件數(shù)據(jù)2'
}
}
}
</script>
數(shù)據(jù)插槽
在父組件中在某個標(biāo)簽上通過{}來接收涌韩，{{ }}來渲染（未定義的插槽就用v-slot:defaultc和 v-slot:other）指令來接收
