简单介绍

开发可复用组件时，经常需要父子组件间相互传递数据。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