ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

浅谈 Vue 中用于父子组件传递数据的方式:prop 和 slot

2022-04-22 19:31:45  阅读:235  来源: 互联网

标签:slot 浅谈 default 插槽 prop 组件 传递数据 today


简单介绍

开发可复用组件时,经常需要父子组件间相互传递数据。Vue 提供了 prop 和 slot 两种特性用于处理不同的场景:

  • prop 主要用于向子组件传递子组件必需的数据,类似于函数的一般参数。这类数据进入子组件后无法主动影响子组件的状态,只能被动地被子组件使用。
  • slot 主要用于扩展子组件,使子组件具备原先没有的内容或功能。插槽的内容进入子组件后,可能只是被子组件所使用(显示额外的内容),也可能定义了使用子组件的内容或功能的表达式(这种情况类似于回调函数)。

这里的比喻不一定准确,但是可能有助于理解这两种特性的使用场景和行为。

prop 的定义与使用

在子组件的 props 属性中定义需要暴露到外部的 prop,然后在父组件中通过指定名称传入数据,而且可以指定 prop 的类型、是否必需、默认值等特性,这些特点都与函数参数的用法很像。

简单示例——显示“地区-日期-时间”的组件,<son> 表示子组件:

父组件:

<!-- HTML模板 -->
<son :region="region" :date="date" :time="time"></son>

// Javascript
... // 其他内容省略
  data() {
    return {
      region: { country: "China", province: "Beijing" },
      today: new Date(),
    };
  },
  computed: {
    date() {
      return this.today.getDate();
    },
    time() {
      return {
        hour: this.today.getHours(),
        minute: this.today.getMinutes(),
        second: this.today.getSeconds(),
      };
    },
  },
  components: {
    son,
  },
...

子组件

... // 其他内容省略
  props: {
    region: {
      country: String,
      province: String,
    },
    date: {
      type: Number,
      required: true,
    },
    time: {
      hour: {
        type: [Number, String],
        default: 0,
      },
      minute: {
        type: Number,
        default: 0,
      },
      second: {
        type: Number,
        default: 0,
      },
    },
  },
...

插槽 slot 的类型与使用

  • 默认插槽:父组件中未指定插槽名称或作用域的内容,会进入子组件默认插槽 <slot></slot> 。同时,多个默认插槽会重复传入的内容。使用已被废弃的 slot="default" 方式将插槽的名字声明为 default 相当于默认插槽。
  • 具名插槽:父组件中指定了插槽名称的内容,会进入子组件的具名插槽,当子组件不存在指定的具名插槽时,传递的内容会被静默忽略。同样地,多个具名插槽也会重复传入的内容。
  • 作用域插槽:父组件中

插槽使用示例

父组件:

<son>
  这是一句话。
  <template>这是另一句话。</template>
  <!-- 具名插槽 -->
  <template v-slot:header>
    <p>这是头部</p>
  </template>
  <template #content>
    <p>这是主体</p>
  </template>
  <!-- 这里指定了不存在的具名插槽,里面的内容会被忽略 -->
  <template #footer>
    <p>这是底部</p>
  </template>
  <!-- 作用域插槽 -->
  <!-- 这里将作用插槽中的默认内容姓替换为了名 -->
  <template v-slot:person="scope">
    <p>{{scope.user.firstName}}</p>
  </template>
</son>

子组件:

<div class="son">
    <!-- 具名插槽 -->
    <slot name="header"></slot>
    <!-- 相同的具名插槽会重复输出传入的内容 -->
    <slot name="content"></slot>
    <slot name="content"></slot>
    <!-- 默认插槽 -->
    <slot></slot>
    <!-- 作用域插槽 -->
    <slot
      name="person"
      :user="user"
    >{{ user.lastName }}</slot>
  </div>

页面输出结果:

总结

综上,prop 表现得更像数据型函数参数,至于子组件使用这些数据做什么、怎么做,父组件无法干预;而 slot 更像是传入了一个回调函数,使子组件具备了更多功能,甚至可以像回调函数操作 caller 函数内部数据一样,操作子组件的内部数据。

标签:slot,浅谈,default,插槽,prop,组件,传递数据,today
来源: https://www.cnblogs.com/cjc917/p/16180271.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有