vue---slot插槽的使用

最新推荐文章于 2022-08-09 13:45:30 发布

咩有猫腻.

最新推荐文章于 2022-08-09 13:45:30 发布

阅读量308

点赞数

分类专栏：三-框架类 Vue

本文链接：https://blog.csdn.net/DcTbnk/article/details/107256927

版权

三-框架类同时被 2 个专栏收录

83 篇文章 0 订阅

订阅专栏

Vue

31 篇文章 0 订阅

订阅专栏

在这里插入图片描述

 <title>slot插槽</title>
  </head>
  <body>
    <!-- html -->
    <div id="app">
      <h1>这是一个如何使用插槽的文档</h1>
      <movie>
        <template v-slot:before>
          <p>这是故事的开始</p>
        </template>
        <template #end>
          <p>这是故事的开始</p>
        </template>
        <img
          src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1981857816,660769246&fm=26&gp=0.jpg"
          alt=""
        />
      </movie>
    </div>

    <!-- js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
    <script>
      // slot 就叫插槽，占位符
      // slot 设置一个name属性，这个叫具名插槽
      //  使用的时候需要设置一个template节点，通过v-slot进行绑定，或者v-slot可以简写为#
      const movie = {
        template: `<div class="movie">
        <slot name="before"></slot>
        <h3>忠犬八公</h3>
        <slot></slot>
        <p>评论：呜呜呜......真是太感人了</p>
        <p>点评：这个电影告诉我们，人与动物之间的情感是伟大的，它们是十分忠诚的，我们一定要善待它们。</p>
        <slot name="end"></slot>        
        </div>`,
      };
      new Vue({
        el: "#app",
        components: {
          movie,
        },
      });
    </script>
  </body>

咩有猫腻.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue---slot插槽的使用

<title>slot插槽</title> </head> <body>  <div id="app"> <h1>这是一个如何使用插槽的文档</h1> <movie> <template v-slot:before> <p>这是故事的开始</p> ..
复制链接

扫一扫

专栏目录