AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Vue框架插槽(第八课)

2023-07-16 132
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue框架插槽(第八课)

案例 组件信息的通信

自己思考一下 答案在本文章的后面

插槽 v-slot

这个时候我们就可以来定义插槽slot： 插槽的使用过程其实是抽取共性、预留不同；

我们会将共同的元素、内容依然在组件内进行封装；

同时会将不同的元素使用slot作为占位，让外部决定到底显示什么样的元素；

如何使用slot呢？

Vue中将  元素作为承载分发内容的出口；

在封装组件中，使用特殊的元素就可以为封装组件开启一个插槽；

该插槽插入什么内容取决于父组件如何使用；


插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”.


页面控制平台

案例一

这个案例带你去理解啥是插槽

主页面

   <template #bbb>
        name=BBB请输入密码:<input type="password" name="" id="" />
      </template>
<template>
  <div class="App">
    <headerTab>
      <!-- v-solt 插槽 名称 -->
      <template v-slot:aaa>
        <a href="name=AAA返回按钮<">name=AAA返回按钮</a>
      </template>
      <template #bbb>
        name=BBB请输入密码:<input type="password" name="" id="" />
      </template>
      <template #ccc>
        name=CCC:<input type="Number">
      </template>
      <template #ddd>name=DDD <input type="checkbox" name="" id="" />男 </template>
      <template #eee> name=EEE<input type="checkbox" name="" id="" />女</template>
      <template #[msg]><button>name=fff你好呀</button> </template>
    </headerTab>
    <headerTab>
      <template #[msg]>
        <button>返回按钮</button>
      </template>
      <template v-slot:aaa>
        <a href="#">返回按钮</a>
      </template>
      <template #bbb>
        请输入密码:<input type="password" name="" id="" />
      </template>
      <template #ccc>
        点击按钮:<button>{{ msg }}</button>
      </template>
      <template #ddd> <input type="checkbox" name="" id="" />男 </template>
      <template #eee> <input type="checkbox" name="" id="" />女</template>
    </headerTab>
    <button @click="msg = 'left'">left</button>
    <button @click="msg = 'center'">center</button>
    <button @click="msg = 'right'">right</button>
    <button @click="msg = 'left'">left</button>
    <button @click="msg = 'aaa'">aaa</button>
    <button @click="msg = 'bbb'">bbb</button>
    <button @click="msg = 'ccc'">ccc</button>
    <button @click="msg = 'ddd'">ddd</button>
    <p>返回</p>
    <hr />
    <headerTab :propList="propList">
      <template v-slot="slotProps">
        <div>{{ slotProps.item + "&nbsp;&nbsp;&nbsp;" + slotProps.index }}</div>
      </template>
    </headerTab>
    <hr />
    <!-- <headerTab :propList="propList" v-slot="slotProps"> -->
    <!-- <div>{{slotProps.item+'-'+slotProps.index}}</div> -->
    <!-- </headerTab> -->
  </div>
</template>
<script>
import headerTab from "./components/header-tab.vue";
export default {
  name: "App",
  components: {
    headerTab,
  },
  data() {
    return {
      msg: "我是登录按钮",
      propList: ["王者荣耀", "JavaScript", "Jquery", "Web", "EEEE"],
    };
  },
  methods: {},
};
</script>
<style scoped>
div{
  border-top: 2px solid red;
  background-color: rgb(124, 188, 225);
}
</style>

子组件

 <div class="content">
  <div class="item left">
    <slot name="aaa"> 请输入姓名:<input type="text" /> </slot>
  </div>
  <div class="item"><slot name="bbb">请输入邮箱地址:<input type="emil" /></slot></div>
  <div class="item"><slot name="ccc">我是a链接:<a href="#">我是a标签</a></slot></div>
  <div class="item center">
    <!-- 命令 -->
    <slot name="ddd">标题</slot>
  </div>
  <div class="item right">
    <slot name="eee">登录</slot>
  </div>


<template>
  <div class="content">
    <div class="item left">
      <slot name=" item lefts"> 请输入姓名:<input type="text" /> </slot>
    </div>
    <div class="item">请输入邮箱地址:<input type="emil" /></div>
    <div class="item">我是a链接:<a href="#">我是a标签</a></div>
    <div class="item center">
      <slot name="center">标题</slot>
    </div>
    <div class="item right">
      <slot name="right">登录</slot>
    </div>
  </div>
  <div class="content">
  <div class="item left">
    <slot name="aaa"> 请输入姓名:<input type="text" /> </slot>
  </div>
  <div class="item"><slot name="bbb">请输入邮箱地址:<input type="emil" /></slot></div>
  <div class="item"><slot name="ccc">我是a链接:<a href="#">我是a标签</a></slot></div>
  <div class="item center">
    <!-- 命令 -->
    <slot name="ddd">标题</slot>
  </div>
  <div class="item right">
    <slot name="eee">登录</slot>
  </div>
</div>
  <div>
  <div class="item" v-for="item,index in propList" :key="item">
  <slot :item="item" :index="index">登录信息</slot>
  <slot name="two">我是数据信息</slot>
  </div>
  </div>
</template>
<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "left",
  props: ["propList"],
  data() {
    return {
      msg: "子组件的msg",
    };
  },
  methods: {},
};
</script>
<style scoped>
.content {
  display: flex;
  height: 50px;
  line-height: 50px;
  text-align: center;
  display: flex;
}
.item {
  margin-top: 3px;
  border-left: 2px solid red;
  flex: 1;
  background-color: rgb(166, 236, 167);
  color: rgb(0, 0, 0);
}
.left {
  background: rgb(171, 220, 223);
}
.center {
  background: rgb(50, 174, 28);
}
.right {
  background: rgb(10, 155, 213);
}
</style>

案例二  兄弟的组件直接转送值

定义对象的属性值

 

取出值展示在页面上

主页面

<template>
  <div class="app">
    <h3 style="color:red">Provide和Inject基本使用</h3>
    <home></home>
    <hr>
    <content></content>
  </div>
</template>
<script>
import content from "./components/content.vue";
import home from "./components/home.vue";
export default {
  name: "app",
  data() {
    return {
      message: "Hello world vue cli",
    };
  },
  components: {
    // eslint-disable-next-line vue/no-unused-components
    content,
    // eslint-disable-next-line vue/no-unused-components
    home,
  },
  methods: {
    btnclick() {
      console.log("为难忘");
    },
  },
};
</script>
<style scoped>
</style>

子组件1

<template>
  <div class="content">
    <home></home>
  </div>
</template>
<script>
import home from "../components/home.vue";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "content",
  data() {
    return {
      message: "Hello world vue cli",
    };
  },
  // 定义对象
  provide: {
    name: "李四",
    age: 20,
    height: 123,
    weight: 78,
    email: "2678903458@qq.com",
    qq: "2386754567",
    weixing: "12389999933",
  },
  // 函数的写法
  methods: {
    btnclick() {
      console.log("为难忘");
    },
  },
  components: {
    // eslint-disable-next-line vue/no-unused-components
    home,
  },
};
</script>
<style scoped>
</style>


 // 定义对象
  provide: {
    name: "李四",
    age: 20,
    height: 123,
    weight: 78,
    email: "2678903458@qq.com",
    qq: "2386754567",
    weixing: "12389999933",
  }

子组件2

  //   取值
  inject: ["name", "age", "height", "weight", "email", "qq", "weixing"],
<template>
  <h6>
    在home.vue组件中和content组件中利用 provide定义对象 利用 inject取出对象
  </h6>
  <div class="home">
    <content></content>
    <table>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>身高</th>
        <th>体重</th>
        <th>邮箱</th>
        <th>qq</th>
        <th>微信</th>
      </tr>
      <tr>
        <td>
          <span>{{ name }}</span>
        </td>
        <td>
          <span>{{ age }}</span>
        </td>
        <td>
          <span>{{ height }}</span>
        </td>
        <td>
          <span>{{ weight }}</span>
        </td>
        <td>
          <span>{{ email }}</span>
        </td>
        <td>
          <span>{{ qq }}</span>
        </td>
        <td>
          <span>{{ weixing }}</span>
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
import content from '../components/content.vue'
// home 与content组件为兄弟元素
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "home",
  data() {
    return {
      message: "Hello world vue cli",
    };
  },
  components: {
    // eslint-disable-next-line vue/no-unused-components
    content
  },
  //   取值
  inject: ["name", "age", "height", "weight", "email", "qq", "weixing"],
  methods: {
    btnclick() {
      console.log("为难忘");
    },
  },
};
</script>
<style scoped>
.home {
  background-color: rgb(214, 248, 177);
  display: flex;
}
.home span {
  font-size: 20px;
  background-color: rgb(236, 253, 239);
  color: red;
  flex: 1;
}
table {
  width: 100%;
  background-color: rgb(176, 230, 232);
  color: rgb(255, 0, 0);
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
td {
  width: 18%;
  border-radius: 10px;
}
td {
  text-align: center;
  line-height: 60px;
  height: 60px;
  border: 3px solid green;
}
</style>

组件通信答案

<!-- eslint-disable vue/require-v-for-key -->
<template>
  <div class="app">
    <div class="big_father">
      <span
        v-for="(item, index) in arrays"
        :key="index.id + ''"
        class=".big_father"
        :class="{ active: isshow === index }"
        @click="btnclick(index)"
        >{{ item }} {{ index }}</span
      >
    </div>
    <div>
    <span
   v-for="(item, index) in infor"
   :key="index.id + ''"
   class=".big_father"
   :class="{ active: isshow === index }"
   @click="btnclick1(ko)">{{ item }} {{ index }}</span
 >
    </div>
    <yf v-show="isshow === 0"></yf>
    <kz v-show="isshow === 1"></kz>
    <xz v-show="isshow === 2"></xz>
    <sy v-show="isshow === 3"></sy>
    <wt v-show="isshow === 4"></wt>
  </div>
</template>
<script>
// 导入文件信息
import yf from "./components/yf.vue";
import xz from "./components/xz.vue";
import kz from "./components/kz.vue";
import sy from "./components/sy.vue";
import wt from './components/wt.vue';
export default {
  components: {
    // eslint-disable-next-line vue/no-unused-components
    yf,
    // eslint-disable-next-line vue/no-unused-components
    xz,
    // eslint-disable-next-line vue/no-unused-components
    kz,
    // eslint-disable-next-line vue/no-unused-components
    sy,
    wt
  },
  name: "app",
  data() {
    return {
      message: "Hello world vue cli",
      isshow: 0,
      arrays: ["衣服", "鞋子", "裤子", "上衣", "外套"],
      infor: ["衣服页面", "鞋子页面", "裤子页面", "上衣页面", "外套页面"],
      index:0,
      ko:true
    };
  },
  methods: {
    btnclick(flag) {
      this.isshow = flag;
    },
    btnclick1(ko){
      this.ko= !ko
    }
  },
};
</script>
<style scoped>
.active {
  color: red;
  background-color: azure;
  border: 2px solid lightseagreen;
  border-bottom: 8px solid red;
  border-radius: 12px;
}
.big_father {
  display: flex;
}
.big_father div {
  text-align: center;
  height: 60px;
  line-height: 60px;
  flex: 1;
  color: white;
  background-color: rgb(28, 125, 147);
}
.big_father div span {
  text-align: center;
  height: 60px;
  line-height: 60px;
  width: 100px;
  flex: 1;
  color: white;
  background-color: rgb(116, 214, 236);
}
button {
  height: 60px;
  width: 100px;
  line-height: 60px;
  margin-left: 100px;
}
span {
  text-align: center;
  line-height: 60px;
  margin-left: 10px;
  display: inline-block;
  width: 17%;
  height: 60px;
  font-size: 20px;
  border-radius: 20px;
  background: rgb(121, 224, 235);
  border-right: 2px solid red;
}
</style>





文章标签：
JavaScript
关键词：
vue框架VUE.js
VUE.js框架
vue插槽VUE.js
插槽VUE.js
VUE.js插槽
t75yjb52rsccc
目录
相关文章
34789737
|
4月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中，兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线，大型项目建议使用Pinia等状态管理工具，确保数据流清晰可控，避免内存泄漏。
34789737
383 2
哇塞女孩
|
3月前
|
缓存 JavaScript
vue中的keep-alive问题（2）
vue中的keep-alive问题（2）
哇塞女孩
352 137
谢妹纸
|
7月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
谢妹纸
874 0
我们是幸福一家人
|
7月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
我们是幸福一家人
388 82
rvblio6ca4cug
|
6月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎，秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」，成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构，实现设计到代码全流程自动化，效率提升300%，助力企业降本增效，引领“设计即生产”新时代。
rvblio6ca4cug
509 1
34789737
|
6月前
|
JavaScript 安全
在 Vue 中，如何在回调函数中正确使用 this？
在 Vue 中，如何在回调函数中正确使用 this？
34789737
333 0
34789737
|
7月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用，可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置（如自定义表情列表、主题定制、动画效果和懒加载）以及完整集成示例。开发者可根据需求扩展功能，例如 GIF 搜索或自定义表情上传，提升用户体验。资源链接提供进一步学习材料。
34789737
338 1
过了即是客
|
Web App开发 JavaScript 前端开发
Vue框架快速入门
Vue是现在最流行的前端框架之一，而且相对于其他两个框架React和Angular来说也更加易学，而且它的作者是国人，中文文档也很完善。当然Vue框架算是比较高级的框架，所以在使用过程中还需要JavaScript、JavaScript 2015、WebPack、NodeJS、npm、ESLint、JavaScript单元测试框架等其他知识和框架的使用方法。
过了即是客
1467 0
小宋1021
|
9月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
小宋1021
1143 4
34789737
|
8月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑，结合D3强大的数据可视化能力，实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展（如节点类型定制、连接样式优化等），并提供了性能优化方案以应对大数据量场景。最终，展示了基础网络拓扑、实时更新拓扑等应用实例，为开发者提供了一套完整的实现思路和实践经验。
34789737
1047 77

热门文章

最新文章

  • 1
    SpringCloud微服务实战——搭建企业级开发框架（四十一）：扩展JustAuth+SpringSecurity+Vue实现多租户系统微信扫码、钉钉扫码等第三方登录
  • 2
    Vue 目录结构 vite 项目
  • 3
    vue3中结合egg实现jsonp跨域请求
  • 4
    将Elementui里的Table表格做成响应式并且和Pagination分页组件封装在一起（Vue实战系列）
  • 5
    Vue3中使用rem布局
  • 6
    Vue 利用Canvas标签实现动态验证码校验（前端必备附源码）
  • 7
    Vue如何读取cookie实现路由守卫（检查用户登录状态）
  • 8
    【Spring + Vue前后端分离】可商用的开源后台管理框架软件eladmin剖析
  • 9
    【vue2小知识】路由守卫的使用与解决RangeError: Maximum call stack size exceeded问题的报错。
  • 10
    前端必知词汇：Vue.js
  • 1
    Vue 3性能优化
    307
  • 2
    vue中的keep-alive问题（2）
    352
  • 3
    Vue 3
    641
  • 4
    vue3使用ts传参教程
    352
  • 5
    基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
    477
  • 6
    Vue中如何实现兄弟组件之间的通信
    383
  • 7
    虚拟列表在Vue3中的具体应用场景有哪些？
    542
  • 8
    除了循环引用，Vue3还有哪些常见的性能优化技巧？
    315
  • 9
    在 Vue 中，如何在回调函数中正确使用 this？
    333
  • 10
    vue3循环引用自已实现
    149

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 低代码开发师（初级）实战教程
    • 下一篇
    【DataEase】零代码数据可视化分析工具的安装部署保姆级教程