泰安公司网站建设,什么叫展示型网站,门户类网站如何做策划,wordpress chuxia主题1.认识插槽
◼ 在开发中#xff0c;我们会经常封装一个个可复用的组件#xff1a; 前面我们会通过props传递给组件一些数据#xff0c;让组件来进行展示#xff1b; 但是为了让这个组件具备更强的通用性#xff0c;我们不能将组件中的内容限制为固定的div、span等等…1.认识插槽
◼ 在开发中我们会经常封装一个个可复用的组件 前面我们会通过props传递给组件一些数据让组件来进行展示 但是为了让这个组件具备更强的通用性我们不能将组件中的内容限制为固定的div、span等等这些元素 比如某种情况下我们使用组件希望组件显示的是一个按钮某种情况下我们使用组件希望显示的是一张图片 我们应该让使用者可以决定某一块区域到底存放什么内容和元素 ◼ 举个栗子假如我们定制一个通用的导航组件 - NavBar 这个组件分成三块区域左边-中间-右边每块区域的内容是不固定 左边区域可能显示一个菜单图标也可能显示一个返回按钮可能什么都不显示 中间区域可能显示一个搜索框也可能是一个列表也可能是一个标题等等 右边可能是一个文字也可能是一个图标也可能什么都不显示
2.如何使用插槽
◼ 这个时候我们就可以来定义插槽slot 插槽的使用过程其实是抽取共性、预留不同 我们会将共同的元素、内容依然在组件内进行封装 同时会将不同的元素使用slot作为占位让外部决定到底显示什么样的元素 ◼ 如何使用slot呢 Vue中将 slot 元素作为承载分发内容的出口 在封装组件中使用特殊的元素slot就可以为封装组件开启一个插槽 该插槽插入什么内容取决于父组件如何使用
3.插槽的默认内容 App.vue
templatediv classapp!-- 1.内容是button --show-message title哈哈哈button我是按钮元素/button/show-message!-- 2.内容是超链接 --show-messagea href#百度一下/a/show-message!-- 3.内容是一张图片 --show-messageimg src/img/kobe02.png alt/show-message!-- 4.内容没有传递 --show-message/show-message/div
/templatescriptimport ShowMessage from ./ShowMessage.vueexport default {components: {ShowMessage}}
/scriptstyle scoped
/style
showMessage.vue
templateh2{{ title }}/h2div classcontentslotp我是默认内容, 哈哈哈/p/slot/div
/templatescriptexport default {props: {title: {type: String,default: 我是title默认值}}}
/scriptstyle scoped
/style 4.具名插槽
当一个组件内多个插槽时,会出现
App.vue
templatenav-barbutton返回/buttonspan内容/spana href#登录/a/nav-bar
/templatescriptimport NavBar from ./navBar.vueexport default {components: {NavBar}
/scriptnavBar.vue
templatediv classnav-bardiv classleftslotleft/slot/divdiv classcenterslotcenter/slot/divdiv classrightslotright/slot/div/div
/template
子组件内预留了三个插槽的位置,在父组件内写了三个标签,但是结果如下: 即这三个插槽内都插入了三个标签
如果不写清楚具体是在哪个插槽内插入,一个具名插槽都没有,则默认在每个插槽内都插入 为了明确到底是什么内容插入什么插槽
每次使用时,将需要插入的内容包裹在 template v-slot:名字标签内准确插入,可以缩写为 template #名字
App.vue
templatenav-bartemplate v-slot:leftbutton返回/button/templatetemplate v-slot:centerspan内容/span/templatetemplate v-slot:righta href#登录/a/template/nav-bar
/templatescriptimport NavBar from ./navBar.vueexport default {components: {NavBar},}
/scriptnavBar.vue
给每个插槽加上name
templatediv classnav-bardiv classleftslot nameleftleft/slot/divdiv classcenterslot namecentercenter/slot/divdiv classrightslot namerightright/slot/div/div
/template
一个不带 name 的slot带有隐含的名字 default div classotherslot namedefault/slot/div
5.动态插槽
◼ 什么是动态插槽名呢 目前我们使用的插槽名称都是固定的 比如 v-slot:left、v-slot:center等等 我们可以通过 v-slot:[dynamicSlotName]方式动态绑定一个名称
App.vue
nav-bartemplate v-slot:[position]a href#注册/a/template/nav-barbutton click position left 左边/buttonbutton click position center 中间/buttonbutton click position right 右边/button
data内部position初始值为center
6.具名插槽的缩写
具名插槽使用的时候缩写 跟 v-on 和 v-bind 一样v-slot 也有缩写 即把参数之前的所有内容 (v-slot:) 替换为字符 # template #centerspan内容/span/templatetemplate v-slot:righta href#登录/a/template
7.作用域插槽(难)
◼ 在Vue中有渲染作用域的概念 父级模板里的所有内容都是在父级作用域中编译的 子模板里的所有内容都是在子作用域中编译的 ◼ 如何理解这句话呢我们来看一个案例 在我们的案例中ChildCpn自然是可以让问自己作用域中的title内容的 但是在App中是访问不了ChildCpn中的内容的因为它们是跨作用域的访问 ◼ 但是有时候我们希望插槽可以访问到子组件中的内容是非常重要的 当一个组件被用来渲染一个数组元素时我们使用插槽并且希望插槽中没有显示每项的内容 这个Vue给我们提供了作用域插槽 ◼ 我们来看下面的一个案例 1.在App.vue中定义好数据 2.传递给ShowNames组件中 3.ShowNames组件中遍历names数据 4.定义插槽的prop 5.通过v-slot:default的方式获取到slot的props 6.使用slotProps中的item和index App.vue
templatediv classapp!-- 1.tab-control --tab-control :titles[衣服, 鞋子, 裤子] tab-item-clicktabItemClick/!-- tab-control :titles[流行, 最新, 优选]/ --!-- 2.展示内容 --h1{{ pageContents[currentIndex] }}/h1tab-control :titles[衣服, 鞋子, 裤子] tab-item-clicktabItemClickbuttonhhh/button/tab-control/div
/template
TabControl.vue
templatediv classtab-controltemplate v-for(item, index) in titles :keyitemdiv classtab-control-item:class{ active: index currentIndex }clickitemClick(index)slotspan{{ item }}/span/slot/div/template/div
/template 如果我们想要让插槽内button的内容变为item,从子组件的data中获取,而非写死的内容
直接在父组件的button元素内使用mustache无法获取子组件内定义的item
App.vue tab-control :titles[衣服, 鞋子, 裤子] tab-item-clicktabItemClicktemplate v-slot:defaultpropsbutton{{props.item}}/button/template/tab-control
简写一下具名插槽 tab-control :titles[衣服, 鞋子, 裤子] tab-item-clicktabItemClicktemplate #defaultpropsbutton{{props.item}}/button/template/tab-control TabControl.vue template v-for(item, index) in titles :keyitemdiv classtab-control-item:class{ active: index currentIndex }clickitemClick(index)slot :itemitemspan{{ item }}/span/slot/div/template 独占默认插槽的缩写
