组件化高级

最新推荐文章于 2022-12-26 00:00:00 发布
最新推荐文章于 2022-12-26 00:00:00 发布
阅读量397 收藏 1
点赞数
分类专栏： vue 文章标签： vue html5 node.js jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33879627/article/details/108712264
版权

（十二）组件化高级

12.1 slot-插槽的基本使用

​ 我们在使用组件的时候有时候希望，在组件内部定制化内容，例如京东这样。

在这里插入图片描述

在这里插入图片描述

这两个都是导航栏，组件的思想是可以复用的，把这个导航栏看做一个组件。

这个组件都可以分成三个部分，左边中间右边，如果可以分割组件，就可以定制化组件内容了。

  <!-- 父组件 -->
  <div id="app">

    <cpn></cpn>
    <cpn>
      <span style="color:red;">这是插槽内容222</span>
    </cpn>
    <cpn>
      <i style="color:red;">这是插槽内容333</i>
    </cpn>
    <cpn></cpn>

  </div>

  <!-- 插槽的基本使用使用<slot></slot> -->
  <!-- 子组件 -->
  <template id="cpn">

    <div>
      <div>
        {{message}}
      </div>
      <!-- 插槽默认值 -->
      <slot><button>button</button></slot>
    </div>
  </template>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

  <script>
    const cpn = {
      template: "#cpn",
      data() {
        return {
          message: "我是子组件"
        }
      },
    }
    const app = new Vue({
      el: "#app",
      data() {
        return {
          message: "我是父组件消息"
        }
      },
      components: {
        cpn
      },
    })
  </script>

简单使用插槽，定义template时候使用slot

  <!-- 子组件 -->
  <template id="cpn">
    <div>
      <div>
        {{message}}
      </div>
      <!-- 插槽默认值 -->
      <slot><button>button</button></slot>
    </div>
  </template>

插槽可以使用默认值，<button>button</button>就是插槽的默认值。

<cpn></cpn>
<cpn><span style="color:red;">这是插槽内容222</span></cpn>

使用插槽，<span style="color:red;">这是插槽内容222</span>将替换插槽的默认值

上述代码结果如图所示

在这里插入图片描述

替换了两次插槽，两次未替换显示默认的button。

如果想实现组件分成三部分就可以使用三个<slot></slot>来填充插槽了。

12.2 slot-具名插槽的使用

​ 具名插槽，就是可以让插槽按指定的顺序填充，而没有具名的插槽是按照你填充的顺序排列的，而具名插槽可以自定义排列。

<!-- 父组件 -->
  <div id="app">

    <cpn>
      <span>没具名</span>
      <span slot="left">这是左边具名插槽</span>
      <!-- 新语法 -->
      <template v-slot:center>这是中间具名插槽</template>
      <!-- 新语法缩写 -->
      <template #right>这是右边具名插槽</template>


    </cpn>


  </div>

  <!-- 插槽的基本使用使用<slot></slot> -->
  <!-- 子组件 -->
  <template id="cpn">

    <div>

      <slot name="left">左边</slot>
      <slot name="center">中间</slot>
      <slot name="right">右边</slot>
      <slot>没有具名的插槽</slot>
    </div>
  </template>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

  <script>
    const cpn = {
      template: "#cpn",
      data() {
        return {
          message: "我是子组件"
        }
      },
    }
    const app = new Vue({
      el: "#app",
      data() {
        return {
          message: "我是父组件消息"
        }
      },
      components: {
        cpn
      },
    })
  </script>

如图所示

在这里插入图片描述

没有具名的插槽排在最后，因为在定义组件的时候，排在了最后，如果有多个按顺序排列。具名插槽按照自定义的顺序排列。

定义具名插槽，使用name属性，给插槽定义一个名字。

  <!-- 插槽的基本使用使用<slot></slot> -->
  <!-- 子组件模板 -->
  <template id="cpn">
    <div>
      <slot name="left">左边</slot>
      <slot name="center">中间</slot>
      <slot name="right">右边</slot>
      <slot>没有具名的插槽</slot>
    </div>
  </template>

使用具名插槽，在自定义组件标签内使用slot="left"，插入指定插槽

  <!-- 父组件 -->
  <div id="app">
    <cpn>
      <span>没具名</span>
      <span slot="left">这是左边具名插槽</span>
      <!-- 新语法 -->
      <template v-slot:center>这是中间具名插槽</template>
      <!-- 新语法缩写 -->
      <template #right>这是右边具名插槽</template>
    </cpn>
  </div>

注意：此处有是三种写法，获取指定插槽。

12.3 编译的作用域

​ 前面说过组件都有自己的作用域，自己组件的作用在自己组件内。

<!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">
    <!-- 使用的vue实例作用域的isShow -->
    <cpn v-show="isShow"></cpn>
  </div>
<!-- 插槽的基本使用使用<slot></slot> -->
  <!-- 子组件 -->
  <template id="cpn">
    <div>
      <h2>我是子组件</h2>
      <p>哈哈哈</p>
      <!-- 组件作用域，使用的子组件的作用域 -->
      <button v-show="isShow"></button>
    </div>
  </template>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

  <script>
    const cpn = {
      template: "#cpn",
      data() {
        return {
          isShwo:false
        }
      },
    }
    const app = new Vue({
      el: "#app",
      data() {
        return {
          message: "我是父组件消息",
          isShow:true
        }
      },
      components: {
        cpn
      },
    })
  </script>
</body>

</html>

结果如下

在这里插入图片描述

子组件使用的是子组件的isShow，子组件为false，所以button没显示，被隐藏。

12.4 作用域插槽案例

​ 父组件替换插槽的标签，但是内容是由子组件来提供。

​ 当组件需要在多个父组件多个界面展示的时候，将内容放在子组件插槽中，父组件只需要告诉子组件使用什么方式展示界面。

<!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">
    <cpn></cpn>
    <!-- 目的是获取子组件数据 -->
    <cpn>
      <!-- 2.5以下必须使用template -->
      <template slot-scope="slot">
        <!-- <span v-for="(item, index) in slot.data" :key="index">{{item}}-</span> -->
        <span>{{slot.data.join(' - ')}}</span>
      </template>
    </cpn>
    <cpn>
        <!-- 2.5以下必须使用template -->
        <template slot-scope="slot">
          <!-- <span v-for="(item, index) in slot.data" :key="index">{{item}}*</span> -->
          <span>{{slot.data.join(' * ')}}</span>
        </template>
      </cpn>
  </div>

<!-- 插槽的基本使用使用<slot></slot> -->
  <!-- 子组件 -->
  <template id="cpn">

    <div>
      <slot :data="pLanguage">
          <ul>
              <li v-for="(item, index) in pLanguage" :key="index">{{item}}</li>
            </ul>
      </slot>

    </div>
  </template>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

  <script>
    const cpn = {
      template: "#cpn",
      data() {
        return {
          isShwo:false,
          pLanguage:['JavaScript','Java','C++','C']
        }
      },
    }
    const app = new Vue({
      el: "#app",
      data() {
        return {
          isShow:true
        }
      },
      components: {
        cpn
      },
    })
  </script>
</body>

</html>

组件中使用slot-scope="slot"**（2.6.0已经废弃）**给插槽属性命名，在通过slot调用绑定在插槽上的属性。也可以使用v-slot="slot"。

在这里插入图片描述

薛定谔的猿...
关注
专栏目录
Vue.JS进阶语法及高级-组件块（部分随记）
weixin_57808227的博客
08-24 156
lable标签的作用：title属性（鼠标悬浮时有提示），for属性（与当前标签是一组，可不写） 注：mustache语法不能直接写在属性里，v-bind绑定可以（不用写花括号） V-model可以充当name和value，实现双向绑定的必须标签 1、v-model修饰符 常用的有：lazy | number | trim 三个 1.1、lazy 懒加载 延迟 1.2、number 1.3、trim 只去除前后空格，不去除文字中间...
vue基础教学（9）
Taojia9958的博客
06-09 673
二、ref的用法 1、ref的基本使用 2、ref在组件上使用 三、is的用法 1、is用法一 1、is用法二 四、插槽 vue.js插槽的作用：1、基本使用若组件标签内部嵌套一些其它标签的时候，这些标签无法显示，若要显示的话，在组件内部通过进行接收，slot会将所以标签在同一个位置全部进行接收显示 插槽的分类：默认插槽、具名插槽、作用域插槽2、命名插槽（具名插槽）好处：可以增加插槽的灵活性 在组件标签内的标签中添加slot属性，属性值为插槽名称:1在组件内部通过name
vue+antd实现可编辑表格
budai_bb的博客
04-22 4165
1、新建一个custom_table的的组件 <template> <a-card :title="title"> <template #extra> <div class="submitBtn"> <a v-if="!edit" @click="editHandle">编辑</a> <div v-else> <a-button @click="saveHandle" clas
模板使用指南
06-06 357
一、模板的定义 目前支持三种模板： a)         Hostwnd模板，节点名为hostwndtemplate b)         Object模板，节点名为objecttemplate c)         ObjectTree模板，节点名为objtreetemplate 以上三种模板都是xlue根节点下面的二级节点，这里需要注意的是xlue下面的二级节点配置的HostWnd、
react 内联样式不能使用style解决方式
miin_ying的博客
05-18 901
<h3 className={styles.indexBlcokh} ref={(node) => { if (node) { node.style.setProperty('padding-top', '10px', 'impo...
深入解析vuex，让你的vue应用更加高效
最新发布
Shids_的博客
12-26 1748
深入解析vuex，让你的vue应用更加高效
【React】两种样式文件引用约定->解决样式不生效问题
the_fool_的博客
01-14 3470
文件目录结构图（不同的命名方式）： 两个scss的内容： .test { background-color: #5e83fb !important; } 引用文件的两种方式： 方式1：import styles from './index.module.scss'; 方式2：import './index.scss'; 方式1的使用方式(react编译器会将文件编译成作...
android组件化demo
11-03
3. **使用组件化框架**：如ARouter、MVI框架等，提供更高级的组件间通信和路由管理。 **实践与注意事项** 1. **清晰定义组件边界**：明确每个组件的职责，避免组件间的职责交叉。 2. **合理规划公共组件**：例如...
模块化、插件化和组件化
01-20
模块化、插件化和组件化是软件开发中常见的架构设计策略，特别是在Android开发中，它们对于项目的可维护性、扩展性和团队协作至关重要。这里我们将深入探讨这些概念以及它们之间的关系。 **模块化** 是一种将大型...
Spring高阶用法之自定义业务对象组件化
08-26
Spring高阶用法之自定义业务对象组件化 自定义业务对象组件化是Spring框架中的高阶用法之一，它允许开发者将业务对象组件化，以便在业务代码中使用@Autowired注入业务对象。下面我们将详细介绍自定义业务对象组件化...
04-bootstrap-blog-post-template-right:Bootstrap博客文章模板-右侧栏
05-01
Bootstrap博客文章模板-右侧栏 查看演示： : 这是使用的基本HTML模板。 所有关键的Bootstrap文件都已包括在内，因此您可以根据需要开始创建布局。 由的创作。 请参阅以供使用。
PDF高级Android组件化强化实战（附源码1
08-03
《PDF高级Android组件化强化实战》是一本专为Android开发者准备的实战指南，旨在帮助开发者提升至高级程序员的水平，并且深入理解组件化技术。书中不仅探讨了高级程序员的特质，还强调了实践的重要性，特别是在...
ComponentTest:组件化测试
05-12
组件化测试是软件开发过程中的一个重要环节，尤其是在大型项目或者模块化程度高的系统中，它能够帮助开发者确保各个独立组件的正确性和可交互性。在Java编程语言中，组件化测试是一个常用的方法来验证代码的各个部分...
10.插槽的使用
m0_70206803的博客
06-28 709
1.什么是插槽？插槽的指令为v-slot，它目前取代了slot和slot-scope，插槽内容，vue实例一套内容分发的api，将slot元素作为承载分发内容的出口。 2.具名插槽的三种写法 插槽可以是任意内容：插槽就是Vue实现的一套内容分发的API，将元素作为承载分发内容的出口。没有插槽的情况下，在组件标签内些一些内容是不起任何作用的，当我在组件中声明了slot元素后，在组件元素内写的内容就会跑到它这里了！...
Vant 库中如何给 List 列表组件的 cell 中左右两边来添加小图标？
狮子座的男孩
05-15 5736
Ⅰ、问题描述 1、Vant 中 List 列表的使用是方便且常用的，但如何给 List 组件中添加小图标而达到想要的效果呢？ 2、图例展示： 其一、想要在 Vant 的 List 组件右边添加 播放 的小图标： 其二、想要在 Vant 的 List 组件左边添加 播放 的小图标(当然：size 可以自己设置)： Ⅱ、问题实现过程： 1、用的 Vant 库及 List 列表组件的地址为：https://vant-contrib.gitee.io/vant/v2/#/zh-CN/icon 2、左右
阶段二-vue模板的综合案例
weixin_45732755的博客
11-11 208
案例效果
avue-crud属性说明
LovelyLittleCub的博客
07-08 5316
html代码： <avue-crud :data="data" :option="option"> <!-- 自定义列--> <template slot="name" slot-scope="scope" > <el-tag></el-tag> </template> <!-- 自定表单--> <template slot-scope="scope" slot.
vue使用技巧
EnyingSong的博客
05-26 553
组件 : 全局组件注册 Render函数 : 拯救繁乱的template Vue权限控制 : 高精度全局权限控制 1.「全局组件注册」 原： <template> <div> <h1>I am HelloWorld</h1> <Child1></Child1> </div> </template> <script> import Child1 from './child1.
Vue中安装element-ui失败问题原因
qq_33879627的博客
09-07 4220
开启npm.cmd，输入npm install element-ui -S命令，正常情况会安装成功，但也有安装不成功的情况， 若安装不成功，则检查npm和vue是否安装成功，使用： npm -v vue -V ps:这里的V大写 来查看版本，看不到版本号，便重新安装npm或vue。 解决方式： npm install npm -g ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值