• Home
  • home > webfront > ECMAS > vue >

    Slot：HTML5-template与vue-template的区别，Vue中template与slot异同

    Author：zhoulujun Date：

    HTML5中​template是HTML5提供的新标签，更加规范和语义化 ；可以把列表项放入template标签中，然后进行批量渲染。Vue-template的作用是模板占位符，可帮助我们包裹元素，但在循环过程当中，template不会被渲染到页面上

    HTML5-template

    template是HTML5提供的新标签，更加规范和语义化 ；可以把列表项放入template标签中，然后进行批量渲染

    <template id="demo"><div id="content">dome:template</div></template>
<script>
// 获取template标签
var tem =document.getElementById("demo")
console.log(tem)
// 在template标签内部内容，必须要用.content属性才可以访问到
var content = tem.content.getElementById("content")
console.log(content)
</script>

    在HTML页面中被template 包裹的代码，浏览器不会渲染出任何信息，这是因为template标签内容天生不可见，设置了display：none；属性。

    在template标签内部内容，必须要用.content属性才可以访问到！

    Vue-template

    template的作用是模板占位符，可帮助我们包裹元素。比如在循环过程当中，template不会被渲染到页面上

    使用情况，参看：

    如果没有template标签，就需要加实际的HTML标签(如DIV)，可能多了样式处理的需求。

    关于template：https://github.com/answershuto/learnVue/blob/master/docs/聊聊Vue的template编译.MarkDown

    Vue-slot

    <slot> 元素作为组件模板之中的内容分发插槽，传入内容后 <slot> 元素自身将被替换。

    Slot 通俗的理解就是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中slot位置）

    并且可以作为承载分发内容的出口

    在 2.6.0 版本中，Vue 为具名插槽和作用域插槽引入了一个新的统一的语法 （即 <v-slot> 指令）。它取代了 slot 和 slot-scope 这两个目前已被废弃、尚未移除，仍在文档中的特性。v3.0 版本后不可使用 slot ，建议直接使用 v-slot 。

    其实我挺讨厌 vue的slot的：虽然它可以使组件更加通用和可重用，但是他让父子有元素相爱相杀，感觉让代码变得混乱。但是还是的学是不！

    使用方法可以分为三类：默认插槽、具名插槽以及作用域插槽。

    默认插槽

    在组件中添加 <slot> 元素，来确定自定义内容的渲染的位置。

    <template>
    <!-- 默认插槽 -->
    <header class="text">
    <!-- slot 的后备内容：为一个插槽设置具体后备（默认）内容是很有用的，当父组件不添加任何插槽内容时，默认渲染该后备内容的值。 -->
        <slot>默认值</slot>
    </header>
</template>

    slot 的后备内容：为一个插槽设置具体后备（默认）内容是很有用的，当父组件不添加任何插槽内容时，默认渲染该后备内容的值。

    具名插槽

    当需要使用多个插槽时，为 <slot> 元素添加 name 属性，来区分不同的插槽，当不填写 name 时，默认为 default 默认插槽。

    <template>
    <div class="content">
      <!-- 具名插槽 -->
      <main class="main">
        <slot name="main"></slot>
      </main>
      <footer class="footer">
        <slot name="footer"></slot>
      </footer>
    </div>
</template>

    具名插槽引用：<template> 标签中添加 v-slot:xxx 或者 #xxx 属性的内容， # 代表插槽的缩写。

     <template>
    <child>
      <template v-slot:main>
        <a href="https://www.zcygov.cn" target="_blank">导航</a>
      </template>
      <template #footer>页脚（具名插槽的缩写#）</template>
      <template #footer>
        <!--  v-slot 重复定义同样的 name 后只会加载最后一个定义的插槽内容 -->
        v-slot只会添加在一个 template 上面
      </template>
    </child>
</template>

    v-slot 重复定义同样的 name 后只会加载最后一个定义的插槽内容

    作用域插槽

    有时让父组件能访问到子组件中的数据是很有用的，我们可以将绑定在 <slot> 元素上的特性称为插槽 Prop ，当然也可以传递一些 Function。

    作用域插槽允许您将模板传递给插槽，而不是传递呈现的元素。它被称为“作用域”槽，因为尽管模板是在父作用域中呈现的，但它可以访问特定的子数据。

    <template>
  <div class="content">
    <!-- 作用域插槽 -->
    <footer class="text">
      <slot name="footer" :user="user" :testClick="testClick">
        {{user.name}}
      </slot>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'child',
  data () {
    return {
      user: {
        title: '测试title',
        name: '测试name'
      }
    };
  },
  methods:{
    testClick(){
      // 子组件通用方法，可传递给父组件复用
      alert('123');
    }
  }
};
</script>

    作用域插槽引用：

    被绑定的属性的集合对象，在父元素中会被 v-slot:xxx="slotProps" 或者 #xxx="slotProps" 接收，xxx 代表具名插槽的 name ，slotProps 为子组件传递的数据对象，可以重命名。

    // 父组件
<template>
  <div class="container">
    <!-- 作用域插槽，以及解构插槽 Prop 的写法 -->
    <child>
      <template #footer="slotProps">
        {{slotProps.user.title}}
        <button @click="slotProps.testClick">点我</button>
      </template>
      <template #footer="{user,testClick}">
        {{user.title}}<br>
        此为解构插槽prop<br>
        <!-- 子组件中的通用方法，可传递给父组件复用 -->
        <button @click="testClick">点我</button>
      </template>
    </child>
  </div>
</template>

<script>
import Child from './component/child.vue';
export default {
  name: 'demo',
  components: {
    Child
  },
};
</script>

    • 解构插槽 prop 可以重命名，例如：v-slot="{ user: person }" 将 user 对象重命名为 person 使用。

    • 解构插槽 prop 可以赋值默认值，例如：v-slot="{ user = { name: 'Guest' } }" 给属性添加自定义后备内容。

    • 动态插槽命名，例如：v-slot:[dynamicSlotName] ，支持命名变量定义。

      • Vue-slot 注意事项

      • v-slot 只能用在 template 上面，或者是独占默认插槽的写法。

      • 父组件引用时 ，重复定义了 v-slot 的 name 后只会加载最后一个定义的插槽内容。

      • 当子组件只有默认插槽时，才可以使用独占默认插槽的缩写语法，只要出现多个插槽，必须使用完整的基于 template 的语法。

      Vue-slot总结：

      • 插槽就是一个返回VNode的函数而已。

      • 普通插槽和作用域插槽根本就没有区别，因为普通插槽就是作用域插槽的子集，这也是 Vue 为什么将二者合并的原因。


      安利一下： https://ustbhuangyi.github.io/vue-analysis/v2/extend/slot.html#普通插槽


      参考文章：

      vue中的template标签 https://blog.csdn.net/u013594477/article/details/80774483

      让你的组件千变万化，Vue slot 剖玄析微 https://www.zoo.team/article/slot

      Vue 插槽(slot)使用(通俗易懂) https://juejin.im/post/6844903920037281805




    转载本站文章《Slot：HTML5-template与vue-template的区别，Vue中template与slot异同》,
    请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue/8568.html

    收藏
    上一篇：vue router warnging:Expected indentation of 10 spaces but found 12
    下一篇：vue.directive：vue自定义指令钩子函数——从源码解读