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

Vue框架插槽(第八课)

2023-07-16 59
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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.js框架
vue插槽VUE.js
插槽VUE.js
vue框架VUE.js
VUE.js插槽
t75yjb52rsccc
目录
相关文章
程序员彭于晏
|
1月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
程序员彭于晏
34 1
阿里巴巴叫我来巡山
|
7天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统，提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性，实现用户友好的界面，方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构，确保稳定性和多功能模块设计，涵盖管理员和用户功能模块，促进物品循环使用，降低开销，提升环保意识，助力绿色校园文化建设。
阿里巴巴叫我来巡山
59 17
程序员成长之路
|
1月前
|
缓存 监控 JavaScript
Vue.js 框架下的性能优化策略与实践
Vue.js 框架下的性能优化策略与实践
程序员成长之路
48 1
九月天空
|
1月前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
九月天空
29 1
G0518
|
1月前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
G0518
32 1
程序员彭于晏
|
1月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
程序员彭于晏
42 0
程序员彭于晏
|
1月前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
程序员彭于晏
45 0
过了即是客
|
Web App开发 JavaScript 前端开发
Vue框架快速入门
Vue是现在最流行的前端框架之一，而且相对于其他两个框架React和Angular来说也更加易学，而且它的作者是国人，中文文档也很完善。当然Vue框架算是比较高级的框架，所以在使用过程中还需要JavaScript、JavaScript 2015、WebPack、NodeJS、npm、ESLint、JavaScript单元测试框架等其他知识和框架的使用方法。
过了即是客
1347 0
雨溪-yuxi
|
1月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱前端的大一学生，专注于JavaScript与Vue，正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
41 1
vue学习第一章
雨溪-yuxi
|
1月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令，包括基本使用、动态绑定class及style等，希望能为你的前端学习之路提供帮助。持续关注，更多精彩内容即将呈现！🎉🎉🎉
雨溪-yuxi
30 1

热门文章

最新文章

  • 1
    Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项？
  • 2
    Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么？
  • 3
    基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
  • 4
    在 Vue 3 中，如何使用 v-model 来处理自定义组件的双向数据绑定？
  • 5
    Vue3中使用provide/inject来避免v-model的循环引用
  • 6
    Vue3中v-model在处理自定义组件双向数据绑定时，如何避免循环引用？
  • 7
    除了provide/inject，Vue3中还有哪些方式可以避免v-model的循环引用？
  • 8
    vue3使用pinia中的actions，需要调用接口的话
  • 9
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 10
    Vue3——使用v-if或v-show来实现过渡的动画效果
  • 1
    vue3使用pinia中的actions，需要调用接口的话
    16
  • 2
    基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
    59
  • 3
    除了provide/inject，Vue3中还有哪些方式可以避免v-model的循环引用？
    30
  • 4
    Vue3中使用provide/inject来避免v-model的循环引用
    36
  • 5
    Vue3中v-model在处理自定义组件双向数据绑定时，如何避免循环引用？
    32
  • 6
    Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项？
    128
  • 7
    在 Vue 3 中，如何使用 v-model 来处理自定义组件的双向数据绑定？
    49
  • 8
    Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么？
    108
  • 9
    Vue.js 框架下的性能优化策略与实践
    49
  • 10
    Vue.js 3：深入探索组合式API的实践与应用
    40

    • 相关课程

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

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索
    • 下一篇
    DataWorks售前咨询