山东做网站公司哪家好,重庆市建设工程管理信息网,wordpress 页面 瞄,山西建设厅官方网站专家库vue前端开发自学,插槽练习第二次,name属性的使用!可以使用name属性#xff0c;来自定义一个名字#xff0c;这样#xff0c;就可以在一个组件内同时出现多个插槽的内容了。在子组件内接收的时候#xff0c;很简答#xff0c;只需要在slot标签里面加上name“mz”#xff1…vue前端开发自学,插槽练习第二次,name属性的使用!可以使用name属性来自定义一个名字这样就可以在一个组件内同时出现多个插槽的内容了。在子组件内接收的时候很简答只需要在slot标签里面加上name“mz”
下面看代码。
templateh3App/h3!-- SlotBasedivh3标题/h3p内容/p/div/SlotBase --SlotTwotemplate v-slot:headerh3我是动态数据,{{message}}/h3/templatetemplate v-slot:mainh4我是静态内容来自插槽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里面的代码情况。
templateh3插槽内容练习2/h3slot nameheader插槽默认值1/slothrslot namemain插槽默认值2/slot
/template
如图所示里面定义了2个插槽而且都分别对应各自的name。这个name就是你在父组件里面定义那个属性值 如图所示这个v-slot就是用来自定义插槽的名字的。很简单。
