软件测试|Vue3 - 插槽 Slots
Vue3 软件测试 插槽 Slots
2023-06-13 09:16:24 时间
插槽 Slots
- 插槽内容:
<slot>
- 插槽内容:
- 编译作用域
- 后备内容
- 具名插槽
- 作用域插槽
- 插槽不仅仅可以传递数据,还可以传递视图。
- 插槽多用来封装一些组件,比如:type的切换组件。常用的组件都是用插槽来实现的。
vue实现一套内容分发的API,插槽通过<slot>
元素作为承载分发内容的出口。
- 1.插槽组件不是以单标签形式结束,而是以双标签形式结束。
- 2.组件内的内容,就是插槽。如果什么都不操作,对应的组件的内容默认不显示。插槽内容
- 插槽内容:
<slot>
- App.vue<script> //1.导入对应的vue文件 import MyComponent from './components/MyComponent.vue'; export default{ name: "App", components:{ //2.注入对应组件 MyComponent } } </script> <template> <div id="app"> <!-- 3.插槽组件 不是单标签--> <MyComponent> </MyComponent> </div> </template> <style > </style>
- MyComponent.vue<template>
<div>
<h3>插槽</h3>
<div>
<!-- 4.插入父vue文件的MyComponent内的内容 -->
<slot>插槽内容</slot>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
在这里插入图片描述
App.vue 里面的插槽组件显示的内容在 MyComponent.vue 文件内
编译作用域
- 编译作用域
对应页面内容不是固定的,而是通过js业务去获取的。
<script>
//1.导入对应的vue文件
import MyComponent from './components/MyComponent.vue';
export default{
name: "App",
components:{
//2.注入对应组件
MyComponent
},
data(){
return{
msg: "我是插槽内容!!"
}
}
}
</script>
<template>
<div id="app">
<!-- 3.插槽组件 不是单标签 -->
<MyComponent>
<!-- 5.文本内容通过js业务去获取 -->
<div>{{msg}}</div>
</MyComponent>
</div>
</template>
<style >
</style>
- 父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。
后备内容
为插槽设置具体的后备「默认」内容很有用,它只会在没有提供内容的时候被渲染。
- 后备内容
如果App.vue内对应插槽什么值都没有传递,则在 MyComponent.vue 文件中进行定义。
- App.vue<script> //1.导入对应的vue文件 import MyComponent from './components/MyComponent.vue'; export default{ name: "App", components:{ //2.注入对应组件 MyComponent }, data(){ return{ msg: "我是插槽内容!!" } } } </script> <template> <div id="app"> <!-- 3.插槽组件 不是单标签 --> <MyComponent> <!-- 5.文本内容通过js业务去获取 --> </MyComponent> </div> </template> <style > </style>
- MyComponent.vue<template>
<div>
<h3>插槽</h3>
<div>
<!-- 4.插入父vue文件的MyComponent内的内容 -->
<slot>默认值/缺省值</slot>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
在这里插入图片描述
具名插槽
- 具名插槽
一个不带 name 的 <slot>
出口会带有隐含的名字“default”。
v-slot
指令只能在<template>
元素上使用
- App.vue<script>
//1.导入对应的vue文件
import MyComponent from './components/MyComponent.vue';
export default{
name: "App",
components:{
//2.注入对应组件
MyComponent
},
data(){
return{
msg: "我是插槽内容!!"
}
}
}
</script>
<template>
<div id="app">
<!-- 3.插槽组件 不是单标签 -->
<MyComponent>
<!-- 5.文本内容通过js业务去获取 -->
<template v-slot:header>
<div>{{msg}}</div>
</template>
<template v-slot:body>
<div>我是内容</div>
</template>
<template v-slot:footer>
<div>我是底部</div>
</template>
</MyComponent>
</div>
</template>
<style >
</style>
在这里插入图片描述
可以通过名字去安排视图所在的位置。
相关文章
- 深入源码彻底搞清vue3中reactive和ref的区别
- Vue3开发最佳实践和实用技巧(上)
- Vue3,用组合编写更好的代码:动态返回(3/4)
- Vue3中的事件修饰符
- Vue3局部组件
- Vue3+Vite+ElementPlus自定义主题色
- Vue3响应式助你轻松实现国际化
- vue2和vue3响应式实现区别
- 手写 Vue3 响应式系统:实现 computed
- vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
- 写给后端开发的『vue3』请求后端接口
- VUE3+TS学习-项目搭建
- vite+vue3搭建uniapp开发环境
- 软件测试|vue3项目创建并运行
- Vue2到Vue3,重学这5个常用的API
- Vue2.x中使用composition API,平滑过渡Vue3
- 1.5k Star国产开源一款基于Vue3+Socket.IO的极简聊天应用,比较完整,略好看