新旧slot插槽用法

最新推荐文章于 2024-07-26 13:02:41 发布

lww_gfly

最新推荐文章于 2024-07-26 13:02:41 发布

阅读量376

点赞数

分类专栏：关于Vue 前端经验文章标签： vue slot v-slot

本文链接：https://blog.youkuaiyun.com/A_head_of_cookies/article/details/93764847

版权

前端经验同时被 2 个专栏收录

14 篇文章

订阅专栏

关于Vue

11 篇文章

订阅专栏

本文介绍了Vue中关于slot的使用，特别是作用域插槽的变迁。从旧的`slot-scope`属性到新的`v-slot`语法，详细阐述了如何在组件模板中定义插槽，以及如何在父组件中接收并使用插槽的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

slot 作用域插槽

旧： slot-scope

使用流程

在组件的模板中书写slot插槽，并将当前组件的数据通过 v-bind 绑定在 slot标签上
在组件使用时，通过slot-scope = “slotProp” 来接收slot标签身上绑定的数据
通过 slotProp.xxx 就可以进行使用了

      <div id="app">
        <Hello>
          <template slot = "default" slot-scope = "slotProp">
            <p> {{ slotProp.msg }} </p>
          </template>
        </Hello>
      </div>
      <template id="hello">
        <div>
          <slot name = "default" :msg = "msg"></slot>
        </div>
      </template>

        Vue.component('Hello',{
                template: '#hello',
                data () {
                  return {
                    msg: 'hello'
                  }
                }
              })
              new Vue({
                el: '#app'
              })

新： v-slot

  <div id="app">
    <Hello>
      <template v-slot:default = "slotProp">
        {{ slotProp.msg }}
      </template>
    </Hello>
  </div>
  <template id="hello">
    <div>
      <slot name = "default" :msg = "msg"></slot>
    </div>
  </template>

  new Vue({
    components: {
      'Hello': {
        template: '#hello',
        data () {
          return {
            msg: 'hello'
          }
        }
      }
    }
  }).$mount('#app')