11-组件化插槽的使用

最新推荐文章于 2022-10-01 09:35:00 发布

小影

最新推荐文章于 2022-10-01 09:35:00 发布

阅读量71

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/small_shadow/article/details/113030569

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

使用组件，里面的内容不是一成不变的，需要修改的部分用插槽代替

01-插槽的基本使用

插槽的默认值button
如果有多个值，同时放入到组件进行替换时，一起作为替换元素

<body>
    <div id="app">
      <cpn>1</cpn>
      <cpn>2</cpn>
    </div>
    <script src="../js/vue.js"></script>
    <template id="cpn">
      <div>
        <h2>我是子组件</h2>
        <slot></slot>
      </div>
    </template>
    <script>
      const cpn = {
        template: "#cpn",
      };
      const app = new Vue({
        el: "#app",
        components: {
          cpn,
        },
      });
    </script>
  </body>

02-具名插槽的使用

利用solt的name属性来精确的定位要修改的地方，用于多个插槽的情况

<body>
    <div id="app">
      <cpn><span slot="left">我被替换了</span></cpn>
    </div>
    <script src="../js/vue.js"></script>
    <template id="cpn">
      <div>
        <slot name="left"><span>左边</span></slot>
        <slot name="center"><span>中间</span></slot>
        <slot name="right"><span>右边</span></slot>
      </div>
    </template>
    <script>
      const cpn = {
        template: "#cpn",
      };
      const app = new Vue({
        el: "#app",
        components: {
          cpn,
        },
      });
    </script>
  </body>

小影

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
11-组件化插槽的使用

使用组件，里面的内容不是一成不变的，需要修改的部分用插槽代替01-插槽的基本使用插槽的默认值button如果有多个值，同时放入到组件进行替换时，一起作为替换元素<body> <div id="app"> <cpn>1</cpn> <cpn>2</cpn> </div> <script src="../js/vue.js"></script>
复制链接

扫一扫