og

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>

Article at   2020/07/01 11:01  Published  code  Category,viewed  147  times

Relevant tags:    Vue 

Address:   https://www.kedong.me/article/21

Copyright Notice: Freely reproduced for non-commercial use