vue3 template 的用法

86 阅读 0 评论 57 点赞

我是靠谱客的博主阳光钥匙，最近开发中收集的这篇文章主要介绍vue3 template 的用法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

用法：

用作多标签 v-if判断

具名插槽缩写

用作多标签 v-if判断

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>template使用</title>
</head>

<body>
  <div id="app">
    <template v-if="flag">
      <h5>demo1</h5>
      <p>demo1</p>
    </template>

    <template v-else>
      <h5>demo2</h5>
      <p>demo2</p>
    </template>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        flag: true,
      }
    })
  </script>
</body>
</html>

具名插槽缩写

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>具名插槽的缩写</title>
</head>
<body>
  <div id="app">
    <child>
      <template v-slot:demoName>
        替换具名插槽内容
      </template>

      <!-- 
        具名插槽缩写
        详情 
        https://v3.cn.vuejs.org/guide/component-slots.html#%E5%85%B7%E5%90%8D%E6%8F%92%E6%A7%BD%E7%9A%84%E7%BC%A9%E5%86%99
       -->
      <template #demoName>
        替换具名插槽内容
      </template>

    </child>
  </div>
  <script src="../lib/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      components: {
        child: {
          template: `
          <div>
            <p>我是一行话</p>
            <slot name="demoName">具名插槽内容</slot>
          </div>
          `,
        }
      }
    })
  </script>
</body>
</html>