文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

解决父子组件通信的Vue插槽有哪些

2023-06-21 20:27

关注

小编给大家分享一下解决父子组件通信的Vue插槽有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

环境准备

先搭个初始环境给大家看看哈。一步一步讲完这个插槽。

就是写了一个类别组件,分别渲染这三种数据。

解决父子组件通信的Vue插槽有哪些

Category组件

<template>  <div class="category">    <h2>{{title}}</h2>    <ul>      <li       v-for="(item,index) in listData"      :key="index">{{item}}</li>    </ul>  </div></template><script>export default {  props: {    listData:Array,    title: String  }}</script><style scoped>.category{  width: 200px;  height: 300px;  background-color:pink;}</style>

App组件

<template>  <div id="app">    <Category :listData="games" :title="'Games'" />    <Category :listData="movies" :title="'Movies'" />    <Category :listData="foods" :title="'Foods'" />  </div></template><script>import Category from './components/Category.vue'export default {  name: 'App',  components: {    Category  },  data () {    return {      games:['穿越火线','qq飞车','洛克王国'],      movies:['你好,李焕英','青春派','匆匆那年'],      foods:['邵阳米粉','长沙茶颜','重庆火锅']    }  }}</script><style>#app {  font-family: Avenir, Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;  margin-top: 60px;  display: flex;  justify-content: space-between;}</style>

最开始就是如上图一样的需求,但是现在业务需求更改了,电影变成了只宣传其中一个,其他的不进行宣传,吃的也变成只宣传一个拉。

如下图:

解决父子组件通信的Vue插槽有哪些

我们怎么改合适呢?

是在Category组件中加if一个个进行判断吗?还是有更好的方法勒???

一个个判断是不行的,那样子代码会变得十分繁杂,不易阅读,万一以后又要更改业务需求,代码都不好动。

接下来就到默认插槽的出现拉。

一、默认插槽

我们在子组件中不用再用props 接收数据,也不做渲染,而是定义一个插槽。

<template><div class="category">    <!-- 定义插槽,插槽默认内容 -->    <slot>如果当父组件不传值过来,即显示此默认</slot>    </div></template><script>    export default {        props: {        }    }</script>

App组件也作出更改

<template><div id="app">    <Category>        <h2>Games</h2>        <!-- <ul><li v-for="(item, index) in games" :key="index">{{ item }}</li>    </ul> -->        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb352264fa7bfdb6d211f2e71e87cc2c48d85b805.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639931135&t=0b2c6c622c84a1e387196cce8f50455e">    </Category>        <Category>        <h2>Movies</h2>        <img class="movies" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13236694597%2F641.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639931502&t=f89c2197bda9bb129d9404d3c4b30f2f">        <!-- <ul> -->        <!-- <li v-for="(item, index) in movies" :key="index">{{ item }}</li> -->        <!-- </ul> -->    </Category>    <Category>        <h2>Foods</h2>        <ul>            <li v-for="(item, index) in foods" :key="index">{{ item }}</li>    </ul>    </Category>        <!-- 当我们什么都没有写的时候,看展示什么 -->    <Category>    </Category>    </div></template> <script>    import Category from './components/Category.vue'     export default {        name: 'App',        components: {            Category        },        data () {            return {                games:['穿越火线','qq飞车','洛克王国'],                movies:['你好,李焕英','青春派','匆匆那年'],                foods:['邵阳米粉','长沙茶颜','重庆火锅']            }        }    }</script>

显示效果:

解决父子组件通信的Vue插槽有哪些

解释:

我们在子组件写了一个<slot>如果当父组件不传值过来,即显示此默认</slot> 标签,此处就相当于占了一个位置。

我们在父组件中,也不再像之前一样<Category/>写自闭和标签,而是写了非自闭和标签<Category> 内容 </Category>。这样做,Vue就会默认的将写在组件标签中的内容渲染完,然后再放回子组件中的 <slot></slot> 占好位置的地方去。

注意:CSS样式写在父组件或者子组件中都是可以的,因为它是渲染完后才放回子组件中的。写在子组件中,就是在放回子组件中时渲染。

写完这里,客户突然觉得你们这么厉害,不满足啦,又开始给你们整幺蛾子。

解决父子组件通信的Vue插槽有哪些

接下来就又到具名插槽登场啦哈。

二、具名插槽

竟然我们能够想到用一个插槽啦,那么为什么不能想着用两个插槽来试一试勒?

改造子组件

<template>  <div class="category">    <!-- 必须加上名称 在父组件中才能指定要放入那个插槽 这也是为什么叫做具名插槽的原因--->    <slot name="slot1">如果当父组件不传值过来,即显示此默认</slot>    <slot name="slot2"></slot>  </div></template><script>export default {  props: {  }}</script>

父组件

<template><div id="app">    <Category>        <template slot="slot1">            <h2>Games</h2>            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb352264fa7bfdb6d211f2e71e87cc2c48d85b805.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639931135&t=0b2c6c622c84a1e387196cce8f50455e"                 /></template><template slot="slot2"><button > qq登录</button><button > 微信登录</button></template> </Category><Category>    <template slot="slot1"><h2>Movies</h2><img     class="movies"     src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13236694597%2F641.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639931502&t=f89c2197bda9bb129d9404d3c4b30f2f"     />    </template>    <template slot="slot2"><button > 点击购票</button>    </template></Category> <Category>    <template slot="slot1"><h2>Foods</h2><ul>    <li v-for="(item, index) in foods" :key="index">{{ item }}</li>        </ul>    </template></Category> <!-- 当我们什么都没有写的时候,看展示什么 --><Category> </Category></div></template> <script>    import Category from './components/Category.vue'     export default {        name: 'App',        components: {            Category        },        data () {            return {                games:['穿越火线','qq飞车','洛克王国'],                movies:['你好,李焕英','青春派','匆匆那年'],                foods:['邵阳米粉','长沙茶颜','重庆火锅']            }        }    }</script>

效果展示

解决父子组件通信的Vue插槽有哪些

解释:

我们可以在组件中放多个slot,但是多个的时候必须要给他们命名,另外父组件中也要进行指定,这样才不会放不进去。

三、作用域插槽

作用域插槽和前面稍稍有点不同,之前都是数据在父组件中,而作用域插槽是数据在子组件中,反过来传递给父组件,让父组件定义结构进行渲染。

改造的子组件

<template>  <div class="category">    <slot name="slot1">如果当父组件不传值过来,即显示此默认</slot>    <slot name="slot2" :foods="foods">如果当父组件不传值过来,即显示此默认</slot>  </div></template><script>export default {  data () {    return{      foods:['邵阳米粉','长沙茶颜','重庆火锅']    }  }}</script>

父组件

<template>  <div id="app">    <Category>      <template slot="slot1">        <h2>Foods</h2>      </template>      <template slot="slot2" scope="listData">        <!--如果不知道的 咱们可以输出看看这是什么· {{listData}}  -->        <ul>          <li v-for="(item, index) in listData.foods" :key="index">            {{ item }}          </li>        </ul>      </template>    </Category>    <Category>      <template slot="slot1">        <h2>Foods</h2>      </template>      <template slot="slot2" scope="listData">        <ol>          <li v-for="(item, index) in listData.foods" :key="index">            {{ item }}          </li>        </ol>      </template>    </Category>    <Category>      <template slot="slot1">        <h2>Foods</h2>      </template>      <template slot="slot2" scope="listData">          <h5 v-for="(item, index) in listData.foods" :key="index">            {{ item }}          </h5>      </template>    </Category>    <Category>      <template slot="slot1" scope="listData">{{listData}}      </template>    </Category>  </div></template> <script>import Category from './components/Category.vue' export default {  name: 'App',  components: {    Category  }}</script>

效果图

解决父子组件通信的Vue插槽有哪些

这种我在学习及练习过程中,并没有想到哪些使用场景,但是在官网上有案例,我想它必定是有存在的理由,只是我的见识太少,而未能利用到而已。

解释:

子组件中通过:变量名="定义的数据" 向父组件传值,父组件用 <template slot="slot2" scope="不用和子组件传递过来的名称相同"> 接收,因为还要. 一层,才到

<template slot="slot2" scope="listData"><!--如果不知道的 咱们可以输出看看这是什么· {{listData}}  --><ul>    <li v-for="(item, index) in listData.foods" :key="index">        {{ item }}    </li>    </ul></template>

以上是“解决父子组件通信的Vue插槽有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯