医院网站备案流程,青岛市蓝色经济区建设官方网站,山东省建设协会网站,杭州网站的优化插槽也是用于vue间创建的数据的一种方式#xff0c;一般都是传递html元素。比如可以用于定义一个带样式的title等
默认插槽#xff1a;没有name的插槽
----父组件------
templatedivTypeCom!-- 如果这里的注释放开#xff0c;那么子组件中默认…插槽也是用于vue间创建的数据的一种方式一般都是传递html元素。比如可以用于定义一个带样式的title等
默认插槽没有name的插槽
----父组件------
templatedivTypeCom!-- 如果这里的注释放开那么子组件中默认的i标签就会被覆盖 --!-- span这是新加的/span --/TypeCom/div
/template-----子组件-----
templatedivp这是本来就有的/psloti如果在用此组件的地方没有传递html则显示默认的/i/slot/div
/template具名插槽顾名思义有名字的插槽。用于多个插槽的地方
-----子组件-----
templatedivp这是本来就有的/pslot nametitlei如果在用此组件的地方没有传递html则显示默认的/i/slotslot namecontent这是默认的内容/slot/div
/template-----父组件-----
templatedivTypeComtemplate slottitle新的title/template!-- 直接写slot和v-slot是一样的v-slot语法是2.6.0以后的 --template v-slot:contentdiv这是新的content/div/template/TypeCom/div
/template作用域插槽一般是用来父组件要根据子组件的值做显示。假如在子组件里有有一些数据父组件要拿到这些数据做不同的处理
---子组件----
templatedivp这是本来就有的/pslot nametitle :arrData1arri如果在用此组件的地方没有传递html则显示默认的/i/slotslot namecontent :arrData2arr这是默认的内容/slot/div
/templatescript
export default {data() {return {arr: [小明, 小红, 小李, 小文]}}
}
/script-----父组件------
templatedivTypeComtemplate slottitle slot-scopedata1h4 v-foritem in data1.arrData1 :keyitem{{ item }}--title/h4/templatetemplate #contentdata2!--template v-slot:contentdata2 等同于上面写法上面是2.6.0后的新语法这三种写法都可以 --!-- 等同于 template #content{arrData2}拿到arrData2之后进行结构--ul v-forcon in data2.arrData2 :keyconli{{ con }}---content/li/ul/template/TypeCom/div
/template
