vue-插槽

最新推荐文章于 2023-12-17 21:27:58 发布

lt要努力

最新推荐文章于 2023-12-17 21:27:58 发布

阅读量87

点赞数

分类专栏： Vue 文章标签： vue插槽 vue作用域插槽 v-slot指令

本文链接：https://blog.csdn.net/louting249/article/details/103100753

版权

Vue 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

slot 插槽

插槽，给组件的内容预留一个空间

分类
- 普通插槽
- 命名插槽

命名插槽

给slot加一个name属性
<slot name = "header"></slot>

<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 src="../../../lib/vue.js"></script>
<script>
  Vue.component('Hello',{
    template: '#hello'
  })
  new Vue({
    el: '#app'
  })
</script>

作用域插槽

作用域插槽可以让本只能在组件的模板中使用的数据，应用到组件的内容中
v-slot指令
   作用：可以将组件的数据在组件的内容中使用

<body>
  <div id="app">
    <Hello>
      <template v-slot:default = "scope">  //加了scope就是局部的
        <p> {{ scope.money }} </p>
      </template>
    </Hello>
  </div>
  <template id="hello">
    <div>
      <slot :money = "money"></slot>
    </div>
  </template>
</body>
<script src="../../../lib/vue.js"></script>
<script>
  /* 
    作用域插槽可以让本只能在组件的模板中使用的数据，应用到组件的内容中
  */
  Vue.component('Hello',{
    template: '#hello',
    data () {
      return {
        money: 100000
      }
    }
  })
  new Vue({
    el: '#app'
  })
</script>