Vue - slot 插槽

最新推荐文章于 2023-11-18 18:34:06 发布

SHIKIO

最新推荐文章于 2023-11-18 18:34:06 发布

阅读量115

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/SHIKIO/article/details/97963225

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

      <div id="app">
          <Hello>
            <p> 这里是Hello的内容 </p>
          </Hello>
        </div>
      
        <template id="hello">
          <div>
            <h3> 这里是hello组件 </h3>
            <slot></slot>
          </div>
        </template>


    /* 
       slot  插槽 
         类比： 游戏卡的游戏机 
         作用： 开辟一个空间，给未来的元素使用
         名词解释： 
           未来元素： 组件的内容
   
       思考： 组件的内容、会被模板覆盖，但是我想要将这个内容保留下来怎么办？
   
     */
   
     Vue.component('Hello',{
       template: '#hello'
     })
   
     new Vue({
      
     }).$mount('#app') // 手动挂载

2.5 slot slot-scope

<body>
  <div id="app">
    <Hello>
      <header slot = "header">
        头部
      </header>
      <footer>
        底部
      </footer>
    </Hello>
  </div>

  <template id="hello">
    <div>
      <slot name = "header"></slot>
      <h3> 这里是hello组件 </h3>
      <slot></slot>
    </div>
  </template>

</body>
<script src="../../../lib/vue.js"></script>
<script>
  /* 
    slot  插槽 
      类比： 游戏卡的游戏机 
      作用： 开辟一个空间，给未来的元素使用
      名词解释： 
        未来元素： 组件的内容

    思考： 组件的内容、会被模板覆盖，但是我想要将这个内容保留下来怎么办？

  */

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

  new Vue({
   
  }).$mount('#app') // 手动挂载

具名插槽
slot-scope

2.6 v-slot

v-slot

<div id="app">
    <Hello>
      <template v-slot:default = "data">
        <p> {{ data.msg }} </p>
      </template>
    </Hello>
  </div>

  <template id="hello">
    <div>
      <h3> 这里是hello组件 </h3>
      <slot :msg = "msg"></slot>
    </div>
  </template>

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