vue前端开发自学,插槽练习第二次,name属性的使用

vue前端开发自学,插槽练习第二次,name属性的使用!可以使用name属性，来自定义一个名字，这样，就可以在一个组件内同时出现多个插槽的内容了。在子组件内接收的时候，很简答，只需要在slot标签里面加上name=“mz”；

下面看代码。

<template><h3>App</h3><!-- <SlotBase><div><h3>标题</h3><p>内容</p></div></SlotBase> --><SlotTwo><template v-slot:header><h3>我是动态数据,{{message}}</h3></template><template v-slot:main><h4>我是静态内容来自插槽002</h4></template></SlotTwo></template>
<script>
import SlotBase from './components/SlotBase.vue'
import SlotTwo from "./components/SlotTwo.vue"
export default{data(){return {message:"插槽内容002"}},components:{SlotBase,SlotTwo}
}
</script>

这个内容是app.vue入口文件的内容源码。下面看看，SlotTwo.vue里面的代码情况。

<template><h3>插槽内容练习2</h3><slot name="header">插槽默认值1</slot><hr><slot name="main">插槽默认值2</slot>
</template>

如图所示，里面定义了2个插槽，而且都分别对应各自的name。这个name就是你在父组件里面定义那个属性值：

如图所示，这个v-slot就是用来自定义插槽的名字的。很简单。