slot 插槽/作用域插槽

最新推荐文章于 2024-05-28 17:25:55 发布

我叫连BB

最新推荐文章于 2024-05-28 17:25:55 发布

阅读量124

点赞数

文章标签： Vue

本文链接：https://blog.csdn.net/weixin_45291595/article/details/93785149

版权

作用/概念: 预先将将来要使用的内容进行保留

<body>
  <div id="app">
    <Hello>
      <div>
			这里是插槽     
 	 </div>
    </Hello>
  </div>
  <template id="hello">
    <div>
      <slot></slot>
      <h3>这里是hello</h3>
    </div>
  </template>
</body>

<script>
  Vue.component('Hello',{
    template: '#hello'
  })

  new Vue({
    el: '#app'
  })
</script>

具名插槽

<body>
  <div id="app">
    <Hello>
      <header slot = 'header'> 这里是头部 </header>
      <footer slot = 'footer'> 这里是底部 </footer>
    </Hello>
  </div>
  <template id="hello">
    <div>
      <slot name = "header"></slot>
      <h3>这里是hello</h3>
      <slot name = "footer"></slot>
    </div>
  </template>
</body>

<script>
  Vue.component('Hello',{
    template: '#hello'
  })
  new Vue({
    el: '#app'
  })
</script>

Vue2.6版本新增v-slot----部分代码从官网摘抄

<body>
<div id="app">
    <Hello>
      <template v-slot:header>
        <h1>content</h1>
      </template>
      <template v-slot:footer>
        <p>Here's some contact info</p>
      </template>
    </Hello>
  </div>
  <template id ='hello'>
    <div class="container">
      <header>
        <!-- 我们希望把页头放这里 -->
        <slot name = "header"></slot>
      </header>
      <main>
        <!-- 我们希望把主要内容放这里 -->
      </main>
      <footer>
        <!-- 我们希望把页脚放这里 -->
        <slot name = 'footer'></slot>
      </footer>
    </div>
  </template>
</body>

<script>
  Vue.component('Hello',{
    template: '#hello'
  })

  new Vue({
    el: '#app'
  })
</script>

slot-scope作用域插槽
旧版

<div id="app">
    <Hello>
(2.)在组件使用时，通过slot-scope = "slotProp" 来接收slot标签身上绑定的数据
      <template slot = "default" slot-scope = "slotProp">
(3.)通过  slotProp.xxx  就可以进行使用了
        <p> {{ slotProp.msg }} </p>
      </template>
    </Hello>
  </div>
  <template id="hello">
    <div>
(1.)在组件的模板中书写slot插槽，并将当前组件的数据通过 v-bind 绑定在 slot标签上
      <slot name = "default" :msg = "msg"></slot>
    </div>
  </template>

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

2.6新版

<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')

我叫连BB

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
slot 插槽/作用域插槽

作用/概念: 预先将将来要使用的内容进行保留<body> <div id="app"> <Hello> <div> 这里是插槽 </div> </Hello> </div> <template id="hello"> <div...
复制链接

扫一扫