该网站未在腾讯云备案,google下载官网,中小企业网站该怎么做,天津低价网站建设插槽可以让组件的使用者来决定组件中的某一块区域到底存放什么元素和内容。
使用插槽#xff1a;
插槽的使用过程其实就是抽取共性、预留不同。将共同的元素、内容依然留在组件内进行封装#xff1b;将不同的元素使用 slot 作为占位#xff0c;让外部决定到底显示什么样的…插槽可以让组件的使用者来决定组件中的某一块区域到底存放什么元素和内容。
使用插槽
插槽的使用过程其实就是抽取共性、预留不同。将共同的元素、内容依然留在组件内进行封装将不同的元素使用 slot 作为占位让外部决定到底显示什么样的元素。
// App.vue
template!-- 2. 在父组件中调用子组件时子组件开始标签和结束标签之间的内容将会被插入到子组件中插槽中 --AppContentbutton按钮/button/AppContentAppContenta hrefhttp:www.com百度一下/a/AppContent
/templatescript
import AppContent from ./components/AppContentexport default {components: {AppContent,}
}
/scriptstyle scoped
/style// AppContent.vue
templatedivh1内容标题/h1!-- 在子组件中预留插槽 --slot/slot/div
/templatescript
export default {
}
/scriptstyle scoped
/style插槽的默认内容
slot/slot元素开始标签和结束标签之间的内容会作为插槽的默认内容插槽的默认内容只会在没有提供插入的内容时显示。
// App.vue
template!-- 在父组件中调用子组件时不提供插槽的内容 --AppContent /
/templatescript
import AppContent from ./components/AppContentexport default {components: {AppContent,}
}
/scriptstyle scoped
/style// AppContent.vue
templatedivh1内容标题/h1slot!-- slot/slot 开始标签和结束标签之间的内容会作为插槽的默认内容显示 --div这是插槽的默认内容/div/slot/div
/templatescript
export default {
}
/scriptstyle scoped
/style具名插槽
具名插槽就是给插槽命名通过 slot 元素的 name 属性可以给插槽命名。这样当一个组件中有多个插槽时就可以区分出来要插入的内容是要插入哪个插槽中。 一个不带 name 的插槽默认隐含的名字是 default。 // App.vue
templateNavBar!-- 2. 在父组件中使用 template 元素包裹要插入到插槽中的内容通过 v-slot:插槽的名称 来决定要插入哪个插槽中 --!-- v-slot:[变量名] 可以通过这种方式来动态地绑定插槽的名称 --!-- v-slot 的缩写为 # --template v-slot:leftbutton返回/button/templatetemplate v-slot:centerinput //templatetemplate v-slot:rightbutton搜索/button/template/NavBar
/templatescript
import NavBar from ./components/NavBarexport default {components: {NavBar,}
}
/scriptstyle scoped
/style// NavBar.vue
templatediv classnavbardiv classleft!-- 1. 在子组件中通过 name 属性给插槽命名 --slot nameleft/slot/div div classcenterslot namecenter/slot/div div classrightslot nameright/slot/div /div
/templatescript
export default {
}
/scriptstyle scoped
/style作用域插槽
作用域插槽的核心就是能够将子组件中的数据传递给父组件的插槽来使用。
// App.vue
templateAppContent!-- 2. 在父组件中使用 template 元素包裹要插入到插槽中的内容通过 v-slot:插槽名称slotProps 可以获取到子组件中指定插槽传递过来的数据 --template v-slot:defaultslotPropsp{{ slotProps.content }}/p/template/AppContent
/templatescript
import AppContent from ./components/AppContentexport default {components: {AppContent,}
}
/scriptstyle scoped
/style// AppContent.vue
templatedivh1子组件的标题/h1!-- 1. 在子组件中通过给 slot 元素添加属性的方式给父组件传递数据 --slot content子组件的内容/slot/div
/templatescript
export default {
}
/scriptstyle scoped
/style
