Vue：具名插槽的使用方法和案例分析以及延伸关于template在vue实例中的作用

最新推荐文章于 2023-04-23 14:47:19 发布

m0rta1

最新推荐文章于 2023-04-23 14:47:19 发布

阅读量737

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/haduwi/article/details/105171508

版权

Vue 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

语法：
在这里插入图片描述 * ：slot的值如果是“header”则会匹配到左边的有相同名字的标签并进行填充。

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <base-layout>
            <p slot="header">标题信息</p>
            <p>主要内容1</p>
            <p>主要内容2</p>
            <p slot="footer">底部信息信息</p>
        </base-layout>

        <base-layout>
            <template slot="header">
        <p>标题信息1</p>
        <p>标题信息2</p>
      </template>
            <p>主要内容1</p>
            <p>主要内容2</p>
            <template slot="footer">
        <p>底部信息信息1</p>
        <p>底部信息信息2</p>
      </template>
        </base-layout>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /*
              具名插槽
            */
        Vue.component('base-layout', {
            template: `
        <div>
          <header>
            <slot name='header'></slot>
          </header>
          <main>
            <slot></slot>
          </main>
          <footer>
            <slot name='footer'></slot>
          </footer>
        </div>
      `
        });
        var vm = new Vue({
            el: '#app',
            data: {

            }
        });
    </script>
</body>

</html>

这里父组件模板中template的作用：临时包裹一下数据，匹配并填充。用它的场景：同时把多条文本填充到插槽中。注意：属性值（header）要写在template上了。

结果：

在这里插入图片描述

拓展：vue中的template标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/vue.min.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!--此处的template标签中的内容显示并且在dom中不存在template标签-->
        <template>
            <div>我是template</div>
            <div>我是template</div>
        </template>
    </div>

    <!--此处的template标签中的内容在页面中不显示，但是在dom结构存在该标签及内部结构-->
    <template id="tem">
        <div id="div1">我是template</div>
        <div>我是template</div>
    </template>
    <script>
        let vm = new Vue({
            el: "#app",
        });
    </script>
</body>

</html>