Vue 插槽

Snipaste_20200701_105923.jpg

作用:父组件来动态决定子组件的内容

默认值

有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的,它只会在没有提供内容的时候被渲染。例如在一个 组件中,slot里写上东西就成为了默认值

          
  • 1
  • 2
  • 3
<button type="submit"> <slot>Submit</slot> </button>

具名插槽

具名插槽也很简单,比如有多个插槽,我作为父组件,肯定想区别子组件中的几个插槽,那就要用slot标签的name属性来标识了,而父组件要决定在什么插槽里面放什么内容,就要将name的值赋值给slot属性传递给对应的插槽。如果slot没有name属性,就是匿名插槽了,而父组件中不指定slot属性的内容,就会被丢到匿名插槽中。

父组件(需要调用的组件)

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
<template> <div> 父组件 <MyFooter> <template v-slot:footer> <div>list</div> </template> </MyFooter> </div> </template> <script> import MyFooter from "./Child"; export default { components:{ MyFooter } }; </script>

子组件(需要被调用的组件) 放插槽

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
<template> <div> <div> 我是子组件 <slot name='footer' /> </div> </div> </template> <script> export default {}; </script> <style scoped></style>

作用域插槽

大概是说在作用域插槽内,父组件可以拿到子组件的数据。子组件可以在slot标签上绑定属性值

父组件(需要调用的组件)

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
<template> <div> 父组件 <MyFooter title="我是父组件的属性,传到子组件的插槽"> <template v-slot:footer="scope"> <div>{{scope.a}}</div> </template> </MyFooter> </div> </template> <script> import MyFooter from "./Child"; export default { components:{ MyFooter }, data(){ return{ } } }; </script>

子组件(需要调用的组件)

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
<template> <div> 我是子组件,下面内容需要父组件来传值 <div> <slot name="footer" a="我是子组件插糟的属性"> </slot> </div> </div> </template> <script> export default {}; </script>

3.0废弃的slot-scope用法

父组件

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
<template> <div> 父组件 <MyFooter title="我是父组件的属性,传到子组件的插槽"> <template slot="footer" slot-scope="scope"> <div>{{scope.a}}</div> </template> </MyFooter> </div> </template> <script> import MyFooter from "./Child"; export default { components:{ MyFooter }, data(){ return{ } } }; </script>

子组件

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
<template> <div> 我是子组件,下面内容需要父组件来传值 <div> <slot name="footer" a="我是子组件插糟的属性"> </slot> </div> </div> </template> <script> export default {}; </script>
(完)
chatGPT
简单谈谈chatGPT和对写代码运用
pymongo实现id自增
新增一个记录id的文档,然后使用find_and_modify实现
青岛四天三夜
很美丽,很适合居住的一座城市
谈谈公司和工作
纯吐槽,不宜观看
React一些不常用知识
记录翻阅使用
请求加薪失败!
谈谈公司和工作
等待你的评论