博客

• 在这里面记录的都是我看文档第一眼看不懂的，我才会记录

作用域插槽

• 在调用同一个子组件的时候，想通过不同的子组件的值，渲染子组件

在子组件中

<template>
  <div class="component-a">
	<!-- 将需要传递到父组件的值通过v-bind的方式绑定上 -->
    <slot :user="user" age="26" bool="true">
      {{ user.lastName }}
    </slot>
    <h2>{{ msg }}</h2>
  </div>
</template>
<script>
export default {
  name: "componentA",
  props: {},
  data() {
    return {
      msg: "这里是A组件",
      user: {
        firstName: "张",
        lastName: "三丰",
      },
    };
  },

  computed: {},
};
</script>

在父组件中

• 父组件逻辑我就不写了，直接写html

<template>
  <div class="catalog">
    <h1>{{ msg }}</h1>
	<!-- 因为在子组件中是通过默认的插槽传过来的值，所以要通过v-slot:default="[自定义参数对象集合]"的方式接即可 -->
    <com-a>
      <template v-slot:default="props">
        {{ props }}
      </template>
    </com-a>

    <com-a>
      <template v-slot:default="props">
        {{ props.user.firstName }}
      </template>
    </com-a>

    <com-a>
      <template v-slot:default="props">
        {{ props.user.lastName }}
      </template>
    </com-a>
  </div>
</template>