vue插槽功能
我理解的话 其实是 在子组件里面 渲染父组件的东西
子组件slot用name声明插槽名,父组件里面用slot=name名来选择在哪个插槽插入,这个是具名插槽,
假如只放了一个slot,没有规定它的名字,这种叫匿名插槽,父组件里面如果插入多个节点标签(div,p,span这些),没有用slot声明的情况下,匿名插槽会把这些都渲染出来.
还有一个最重要的是 作用域插槽,它用来控制子组件到父组件的数据流动,
具体用法理解:
因为子组件的数据父组件直接访问的话是访问不到的,那么就用类似父子组件传值里面的方法来传递,仅仅是相似,但两者是不一样的.
父组件:
<template>
<div class="home">
<childSlot>
//user是父组件的数据
<div>匿名插槽3</div>
<div>
<p>匿名插槽1</p>
<p>匿名插槽2</p>
</div>
<span>sp</span>
<p slot="one" slot-scope="slotProps">{{ user }} -- {{ slotProps }}</p>
//用slotProps可以获取到子组件传递的属性
</childSlot>
</div>
</template>
<script>
import childSlot from "../components/childSlot.vue";
export default {
name: "Home",
components: {
// HelloWorld
childSlot,
},
data() {
return {
user: "nan",
};
},
};
</script>
<template>
<div>
<slot></slot>
<slot name="one" :url='url' :xyz='age'>
</slot>
</div>
</template>
<script>
export default {
data(){
return {
url:'https://baidu.com',
age:20
}
}
}
</script>
<style lang="stylus" scoped>
</style>