服务器之家：专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - Vue插槽_特殊特性slot,slot-scope与指令v-slot说明

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

2021-09-15 16:49阿喵~~ JavaScript

这篇文章主要介绍了Vue插槽_特殊特性slot,slot-scope与指令v-slot说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

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

  • vue
  • slot-scope
  • slot
  • v-slot

    • 延伸 · 阅读

    精彩推荐
    最近更新
    编辑推荐
    阅读排行
    热门标签
    格斗 　 原型 　 原型链 　 仿淘宝商城 　 jqeuryUI 　 网页对话框 　 样式规则 　 blockui 　 页面滚动 　 弹出窗 　 弹出提示 　 hidden 　 Hapi.js 　 无间断 　 对象构建 　 dialogArguments 　 随机显示 　 node应用 　 箭头函数 　 高级类型 　 Vuejs 　 JavaScript技术 　 并发语言 　 JavaScript优化 　 QRCanvas 　 JS库 　 Svelte 　 事件处理函数 　 名称冲突 　 当时时间 　
    © 2019-2023 服务器之家(www.zzvips.com) 版权所有关于我们联系我们版权申明网站地图