服务器之家

服务器之家 > 正文

Vue插槽_特殊特性slot,slot-scope与指令v-slot说明

时间：2021-09-15 16:49     来源/作者：阿喵~~

1、slot作用/概念：预先将将来要使用的内容进行保留；

2、具名插槽：给slot起个名字

3、slot、slot-scope已经被废弃推荐使用vue2.6.0中的v-slot；但是这边还是对新旧方法对做一下使用说明。

slot插槽(不具名)

  1. <body>
  2. <div id="app">
  3. <Test>
  4. <div>slot插槽占位内容</div>
  5. </Test>
  6. </div>
  7. <template id="test">
  8. <div>
  9. <slot></slot>//定义插槽
  10. <h3>这里是test组件</h3>
  11. </div>
  12. </template>
  13. </body>
  14.  
  15. <script>
  16. Vue.component('Test',{
  17. template:"#test"
  18. });
  19.  
  20. new Vue({
  21. el:"#app",
  22. })
  23. </script>

Vue插槽_特殊特性slot,slot-scope与指令v-slot说明

slot具名插槽使用

在组件中使用slot进行占位时，在slot标签内使用name 属性给slot插槽定义一个名字，就是具名插槽。在html中使用具名插槽时，使用slot引入

  1. <body>
  2. <div id="app">
  3. <Test>
  4. <div slot="header">这里是头部</div>//具名插槽使用
  5. <div slot="footer">这里是尾部</div>
  6. </Test>
  7. </div>
  8. <template id="test">
  9. <div>
  10. <slot name="header"></slot>//具名插槽
  11. <h3>这里是Test组件</h3>
  12. <slot name="footer"></slot>
  13. </div>
  14.  
  15. </template>
  16. </body>
  17. <script>
  18. Vue.component(
  19. 'Test',{
  20. template:"#test"
  21. });
  22. new Vue({
  23. el:"#app"
  24. })
  25. </script>

Vue插槽_特殊特性slot,slot-scope与指令v-slot说明

v-slot使用

v-slot在组件中使用slot进行占位时，也是在slot标签内使用name 属性给slot插槽定义一个名字。但是在html内使用时就有些不同了。需要使用template模板标签，template标签内，使用v-slot指令绑定插槽名，标签内写入需要添加的内容

  1. <body>
  2. <div id="app">
  3. <Test>
  4. <template v-slot:header>//v-slot指令使用插槽
  5. <h2>slot头部内容</h2>
  6. </template>
  7.  
  8. <p>直接插入组件的内容</p>
  9.  
  10. <template v-slot:footer>
  11. <h2>slot尾部内容</h2>
  12. </template>
  13. </Test>
  14. </div>
  15.  
  16. <template id ='test'>
  17. <div class="container">
  18. <header>
  19. <!-- 我们希望把页头放这里 -->
  20. <slot name = "header"></slot>//具名插槽
  21. </header>
  22. <section>
  23. 主体内容部分
  24. </section>
  25. <footer>
  26. <!-- 我们希望把页脚放这里 -->
  27. <slot name = 'footer'></slot>
  28. </footer>
  29. </div>
  30. </template>
  31. </body>
  32.  
  33. <script>
  34. Vue.component('Test',{
  35. template:"#test"
  36. });
  37. new Vue({
  38. el:"#app"
  39. })
  40. </script>

Vue插槽_特殊特性slot,slot-scope与指令v-slot说明

作用域插槽：

slot-scope使用：

a、：在组件模板中书写所需slot插槽，并将当前组件的数据通过v-bind绑定在slot标签上。

b、：在组件使用时，通过slot-scope=“gain”,接收组件中slot标签上绑定的数据。

c、:通过gain.xxx就可以使用绑定数据了

  1. <body>
  2. <div id="app">
  3. <Test>
  4. <div slot="default" slot-scope="gain">//作用域插槽的用法（slot-scope）
  5. {{ gain.msg }}
  6. </div>
  7.  
  8. </Test>
  9. </div>
  10.  
  11. <template id="test">
  12. <div>
  13. <slot name="default" :msg="msg"> </slot>
  14. <p>这里是test组件</p>
  15. </div>
  16. </template>
  17. </body>
  1. <script>
  2. new Vue({
  3. el:"#app",
  4. components:{
  5. 'Test':{
  6. template:"#test",
  7. data(){
  8. return {
  9. msg:"你好"
  10. }
  11. },
  12. }
  13. }
  14. })
  15. </script>

Vue插槽_特殊特性slot,slot-scope与指令v-slot说明

作用域插槽：v-slot的用法

  1. <body>
  2.  
  3. <div id="app">
  4. <Test>
  5. <template v-slot:header="gain">//v-slot定义作用域插槽
  6. <div>
  7. <h3>slot</h3>
  8. <p> {{gain.msg}} </p>
  9. </div>
  10. </template>
  11.  
  12. </Test>
  13. </div>
  14.  
  15. <template id="test">
  16. <div>
  17. <slot name="header":msg="msg"></slot>
  18. <p>这里是test组件</p>
  19. </div>
  20. </template>
  21.  
  22. </body>
  23. <script>
  24. Vue.component('Test',{
  25. template:"#test",
  26. data(){
  27. return {
  28. msg:'这里是头部'
  29. }
  30. }
  31. });
  32.  
  33. new Vue({
  34.  
  35. }).$mount("#app")
  36. </script>

Vue插槽_特殊特性slot,slot-scope与指令v-slot说明

Vue2.6.0中使用v-slot指令取代了特殊特性slot与slot-scope，但是从上述案例可以看出，v-slot在使用时，需要在template标签内，这点大家要注意。

补充知识：vue中v-slot指令如何应用Vue插槽及与slot、slot-scope的用法区别

不具名插槽

子组件：

  1. <template>
  2. <div>
  3. <!--定义不具名插槽 -->
  4. <slot></slot>
  5. <h3>这里是不具名插槽组件</h3>
  6. </div>
  7. </template>
  8.  
  9. <script>
  10. export default {
  11. data() {
  12. return {}
  13. },
  14. created() {},
  15. mounted() {},
  16. methods: {}
  17. }
  18. </script>
  19. <style lang="scss" scoped></style>

在父组件中使用：

  1. <template>
  2. <div id="inforCategory-warp">
  3. <!-- 不具名插槽 -->
  4. <lxsolt>不具名插槽</lxsolt>
  5.  
  6. </div>
  7. </template>
  8.  
  9. <script>
  10. import lxsolt from './lx'
  11. export default {
  12. name: 'inforCategory',
  13. components: {
  14. lxsolt,
  15. },
  16. data(){
  17. return{}
  18. }
  19. }
  20. </script>
  21. <style lang="scss" scoped>
  22. #inforCategory-warp {
  23. }
  24. </style>

作用域插槽：

slot-scope使用(slot-scope绑定的是子组件的数据)：

在组件模板中书写所需slot插槽，并将当前组件的数据通过v-bind绑定在slot标签上。

在组件使用时，通过slot-scope=“scope”,接收组件中slot标签上绑定的数据。

通过scope.xxx就可以使用绑定数据了

具名插槽以及作用域插槽

子组件：

  1. <template>
  2. <div>
  3. <slot name="header" :msg="name"></slot>
  4. <h3>这里是具名插槽组件</h3>
  5. <slot name="footer"></slot>
  6. </div>
  7. </template>
  8.  
  9. <script>
  10. export default {
  11. data() {
  12. return {
  13. name:'具名插槽组件'
  14. }
  15. },
  16. created() {},
  17. mounted() {},
  18. methods: {}
  19. }
  20. </script>
  21. <style lang="scss" scoped></style>

父组件：

  1. <template>
  2. <div id="inforCategory-warp">
  3. <!-- 具名插槽 -->
  4. <nameSlot>
  5. <div slot="header" slot-scope="scope">这里是slot-scope<span style="color:red">{{scope.msg}}</span>头部</div>
  6. <div slot="footer">这里是尾部</div>
  7. </nameSlot>
  8.  
  9. </div>
  10. </template>
  11.  
  12. <script>
  13. import nameSlot from './nameSlot'
  14. export default {
  15. name: 'inforCategory',
  16. components: {
  17. nameSlot,
  18. },
  19. data(){
  20. return{
  21. msg:'具名插槽信息',
  22. msg2:'v-slot'
  23. }
  24. }
  25. }
  26. </script>
  27. <style lang="scss" scoped>
  28. #inforCategory-warp {
  29. }
  30. </style>

v-slot以及作用域插槽

子组件:

  1. <template>
  2. <div>
  3. <div class="container">
  4. <header>
  5. <!-- 我们希望把页头放这里 -->
  6. <slot name="header"></slot>
  7. </header>
  8. <section>
  9. v-slot组件
  10. </section>
  11. <footer>
  12. <!-- 我们希望把页脚放这里 -->
  13. <slot name="footer" :msg="msg"></slot>
  14. </footer>
  15. </div>
  16. </div>
  17. </template>
  18.  
  19. <script>
  20. export default {
  21. data() {
  22. return {
  23. msg:'vsolt作用域插槽组件'
  24. }
  25. },
  26. created() {},
  27. mounted() {},
  28. methods: {}
  29. }
  30. </script>
  31. <style lang="scss" scoped></style>

父组件：

  1. <template>
  2. <div id="inforCategory-warp">
  3. <vsolt>
  4. <template v-slot:header>
  5. <h2>slot头部内容</h2>
  6. </template>
  7.  
  8. <p>直接插入组件的内容</p>
  9.  
  10. <template v-slot:footer="scope">
  11. <h2>slot尾部内容<span style="color:red">{{scope.msg}}</span></h2>
  12. </template>
  13. </vsolt>
  14.  
  15. </div>
  16. </template>
  17.  
  18. <script>
  19. import vsolt from './v-slot'
  20. export default {
  21. name: 'inforCategory',
  22. components: {
  23. vsolt,
  24. },
  25. data(){
  26. return{
  27. msg:'具名插槽信息',
  28. msg2:'v-slot'
  29. }
  30. }
  31. }
  32. </script>
  33. <style lang="scss" scoped>
  34. #inforCategory-warp {
  35. }
  36. </style>

以上这篇Vue插槽_特殊特性slot,slot-scope与指令v-slot说明就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

原文链接：https://blog.csdn.net/qq_40616529/article/details/94033417

标签：
slot v-slot vue slot-scope 

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
返回顶部