Vue 3组件的Setup Context：属性、事件与插槽的封装与代理

大家好，今天我们来深入探讨Vue 3组件中setup函数的context参数。context是setup函数中一个非常重要的对象，它提供了访问组件实例属性、触发事件和渲染插槽的能力。理解context的用法对于编写高效、可维护的Vue 3组件至关重要。

1. 为什么需要Setup Context？

在Vue 2中，我们通过this关键字来访问组件的属性、方法、事件和插槽。但在Vue 3的setup函数中，this指向的是undefined。这是因为setup函数是在组件实例化之前执行的，此时组件实例尚未创建完成。

为了解决这个问题，Vue 3引入了setup context。context对象作为setup函数的第二个参数传入，它封装并代理了组件实例的部分功能，使得我们可以在setup函数中访问和使用这些功能。

2. Setup Context的构成

setup context是一个包含三个属性的对象：

attrs: 组件的属性对象，包含了父组件传递给当前组件的所有属性，除了props中声明的属性。
emit: 用于触发自定义事件的函数。
slots: 组件的插槽对象，包含了父组件传递给当前组件的所有插槽内容。

下面我们详细介绍每个属性的用法。

3. attrs：访问组件属性

attrs对象包含了父组件传递给当前组件的所有属性，但不包括props中声明的属性。换句话说，attrs对象包含了那些没有被显式声明为props的属性，也被称为“透传attribute”。

3.1 属性的传递与接收

首先，我们创建一个父组件，并向子组件传递一些属性。

// 父组件 ParentComponent.vue
<template>
  <div>
    <ChildComponent
      message="Hello from parent!"
      custom-class="highlight"
      :data-id="123"
    />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
};
</script>

接下来，我们创建子组件，并在setup函数中使用attrs对象来访问这些属性。

// 子组件 ChildComponent.vue
<template>
  <div :class="attrs['custom-class']">
    <p>{{ attrs.message }}</p>
    <p>Data ID: {{ attrs['data-id'] }}</p>
  </div>
</template>

<script>
import { useAttrs } from 'vue';

export default {
  props: {
    // 假设我们没有在这里声明 message, custom-class, data-id
  },
  setup(props, context) {
    const attrs = useAttrs();
    console.log("Attrs in setup:", attrs);
    return { attrs };
  }
};
</script>

在这个例子中，ChildComponent接收了message、custom-class和data-id三个属性，但是没有在props选项中声明它们。因此，这些属性会出现在context.attrs对象中。在模板中，我们使用attrs['custom-class']和attrs.message来访问这些属性的值。

3.2 监听属性的变化

attrs对象是响应式的。这意味着当父组件传递的属性发生变化时，attrs对象也会自动更新。我们可以使用watch函数来监听attrs的变化。

// 子组件 ChildComponent.vue
<template>
  <div>
    <p>Message: {{ attrs.message }}</p>
  </div>
</template>

<script>
import { watch, ref, onMounted, useAttrs } from 'vue';

export default {
  setup(props, context) {
    const attrs = useAttrs();
    const message = ref(attrs.message);

    watch(
      () => attrs.message,
      (newValue, oldValue) => {
        console.log('Message changed from', oldValue, 'to', newValue);
        message.value = newValue;
      }
    );

    onMounted(() => {
      console.log('Component mounted with message:', attrs.message);
    });

    return { attrs, message };
  }
};
</script>

在这个例子中，我们使用watch函数来监听attrs.message的变化。当父组件传递的message属性发生变化时，watch函数的回调函数会被调用，我们可以在回调函数中执行相应的操作。

3.3 useAttrs Hook

Vue 3提供了一个名为useAttrs的hook，它可以方便地在setup函数中访问attrs对象。在上面的例子中，我们使用useAttrs hook来获取attrs对象。

// 子组件 ChildComponent.vue

<script>
import { useAttrs } from 'vue';

export default {
  setup(props, context) {
    const attrs = useAttrs();
    console.log(attrs);
    return { attrs };
  }
};
</script>

4. emit：触发自定义事件

emit函数用于触发自定义事件。它接受两个参数：事件名称和事件参数。

4.1 事件的触发与监听

首先，我们创建一个子组件，并在setup函数中使用emit函数来触发一个自定义事件。

// 子组件 ChildComponent.vue
<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  setup(props, context) {
    const handleClick = () => {
      context.emit('custom-event', 'Hello from child!');
    };

    return { handleClick };
  }
};
</script>

在这个例子中，当用户点击按钮时，handleClick函数会被调用，然后context.emit('custom-event', 'Hello from child!')会触发一个名为custom-event的事件，并传递一个字符串参数'Hello from child!'。

接下来，我们在父组件中监听这个事件。

// 父组件 ParentComponent.vue
<template>
  <div>
    <ChildComponent @custom-event="handleCustomEvent" />
    <p>Message from child: {{ messageFromChild }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const messageFromChild = ref('');

    const handleCustomEvent = (message) => {
      messageFromChild.value = message;
    };

    return { messageFromChild, handleCustomEvent };
  }
};
</script>

在这个例子中，我们在ChildComponent标签上使用@custom-event="handleCustomEvent"来监听custom-event事件。当ChildComponent触发custom-event事件时，handleCustomEvent函数会被调用，并将事件参数作为参数传递给handleCustomEvent函数。

4.2 事件的参数

emit函数可以传递多个参数。这些参数会作为事件处理函数的参数传递给父组件。

// 子组件 ChildComponent.vue
<script>
export default {
  setup(props, context) {
    const handleClick = () => {
      context.emit('custom-event', 'Arg1', 'Arg2', 123);
    };

    return { handleClick };
  }
};
</script>

// 父组件 ParentComponent.vue
<template>
  <div>
    <ChildComponent @custom-event="handleCustomEvent" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const handleCustomEvent = (arg1, arg2, arg3) => {
      console.log('Received event with args:', arg1, arg2, arg3);
    };

    return { handleCustomEvent };
  }
};
</script>

在这个例子中，ChildComponent触发custom-event事件时传递了三个参数：'Arg1'，'Arg2'和123。这些参数会作为handleCustomEvent函数的参数传递给父组件。

4.3 emits选项

为了更好地描述组件的行为，Vue 3引入了emits选项。emits选项用于声明组件会触发哪些自定义事件。

// 子组件 ChildComponent.vue
<script>
export default {
  emits: ['custom-event', 'another-event'], // 声明组件会触发的事件
  setup(props, context) {
    const handleClick = () => {
      context.emit('custom-event', 'Hello');
    };

    return { handleClick };
  }
};
</script>

emits选项可以是一个字符串数组，也可以是一个对象。当emits选项是一个对象时，我们可以为每个事件定义一个验证函数。

// 子组件 ChildComponent.vue
<script>
export default {
  emits: {
    'custom-event': (payload) => {
      // 验证 payload 是否有效
      return typeof payload === 'string';
    }
  },
  setup(props, context) {
    const handleClick = () => {
      context.emit('custom-event', 'Hello');
    };

    return { handleClick };
  }
};
</script>

在这个例子中，我们为custom-event事件定义了一个验证函数。这个验证函数会检查事件参数是否是一个字符串。如果事件参数不是一个字符串，Vue会发出一个警告。

5. slots：渲染插槽

slots对象包含了父组件传递给当前组件的所有插槽内容。

5.1 插槽的传递与渲染

首先，我们创建一个父组件，并向子组件传递一些插槽内容。

// 父组件 ParentComponent.vue
<template>
  <div>
    <ChildComponent>
      <template #header>
        <h1>Header Content</h1>
      </template>
      <p>Default Slot Content</p>
      <template #footer>
        <p>Footer Content</p>
      </template>
    </ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
};
</script>

接下来，我们创建子组件，并在setup函数中使用slots对象来渲染这些插槽内容。

// 子组件 ChildComponent.vue
<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script>
import { useSlots } from 'vue';

export default {
  setup(props, context) {
    const slots = useSlots();
    console.log("Slots in setup:", slots);

    return { slots };
  }
};
</script>

在这个例子中，ChildComponent接收了三个插槽：header、默认插槽和footer。在模板中，我们使用<slot name="header"></slot>、<slot></slot>和<slot name="footer"></slot>来渲染这些插槽内容。

5.2 插槽的存在性判断

我们可以使用slots对象来判断某个插槽是否存在。

// 子组件 ChildComponent.vue
<template>
  <div>
    <header v-if="slots.header">
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer v-if="slots.footer">
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script>
import { useSlots } from 'vue';

export default {
  setup(props, context) {
     const slots = useSlots();

    return { slots };
  }
};
</script>

在这个例子中，我们使用v-if="slots.header"和v-if="slots.footer"来判断header和footer插槽是否存在。如果插槽存在，我们才渲染相应的插槽内容。

5.3 useSlots Hook

Vue 3提供了一个名为useSlots的hook，它可以方便地在setup函数中访问slots对象。在上面的例子中，我们使用useSlots hook来获取slots对象。

// 子组件 ChildComponent.vue

<script>
import { useSlots } from 'vue';

export default {
  setup(props, context) {
    const slots = useSlots();
    console.log(slots);
    return { slots };
  }
};
</script>

6. 总结：Setup Context的价值

setup context是Vue 3组件中非常重要的一个概念。它提供了访问组件实例属性、触发事件和渲染插槽的能力。通过attrs、emit和slots，我们可以在setup函数中编写更加灵活和强大的组件。理解并熟练掌握setup context的用法是编写高效、可维护的Vue 3组件的关键。

7. Context的属性、事件和插槽访问

属性/方法	描述	示例
`attrs`	包含父组件传递给当前组件的所有属性，但不包括`props`中声明的属性。	`attrs.customClass`, `attrs['data-id']`
`emit`	用于触发自定义事件。	`context.emit('custom-event', 'Hello from child!')`
`slots`	包含父组件传递给当前组件的所有插槽内容。	`<slot name="header"></slot>`, `<slot></slot>`
`useAttrs()`	Hook,方便在setup函数中访问attrs对象。	`const attrs = useAttrs()`
`useSlots()`	Hook,方便在setup函数中访问slots对象。	`const slots = useSlots()`

8. Props和Attrs的区别

props和attrs都用于接收父组件传递的属性，但它们之间存在一些重要的区别。

props是在组件中显式声明的属性。我们需要在props选项中定义props的名称和类型。
attrs是父组件传递给当前组件的所有属性，但不包括props中声明的属性。

通常情况下，我们应该尽可能使用props来接收父组件传递的属性。这可以提高代码的可读性和可维护性。只有当我们需要接收一些动态的、不确定的属性时，才应该使用attrs。

9. 一些最佳实践

尽可能使用props来接收父组件传递的属性。
使用emits选项来声明组件会触发哪些自定义事件。
使用useAttrs和useSlots hook来方便地在setup函数中访问attrs和slots对象。
在模板中使用v-if指令来判断插槽是否存在。

10. Setup Context在大型项目中的运用

在大中型项目中，setup context的使用尤为重要，它能帮助我们更好地组织和管理组件的逻辑。

组件库的开发: 在开发组件库时，setup context能够帮助我们灵活地处理各种属性和事件，使得组件更加通用和可配置。例如，一个表格组件可能需要接收大量的配置属性，使用attrs可以方便地传递这些属性，而无需在props中一一声明。
表单组件的封装: 封装表单组件时，emit函数可以用于触发表单验证事件，将验证结果传递给父组件。 slots可以用于自定义表单项的样式和布局。
复杂业务逻辑的处理: 在处理复杂的业务逻辑时，setup context可以帮助我们将组件的逻辑分解成更小的、更易于管理的部分。我们可以使用attrs来接收业务数据，使用emit来触发业务事件，使用slots来定制用户界面。

总而言之，setup context是Vue 3组件开发中不可或缺的一部分。熟练掌握setup context的用法，可以帮助我们编写更加高效、可维护和可扩展的Vue 3组件。

Context的存在提升了代码的组织性与可维护性

理解并合理使用setup context中的attrs、emit和slots，可以帮助我们更好地组织组件代码，提高代码的可读性和可维护性。同时也使得组件更加灵活，能够适应不同的应用场景。

更多IT精英技术系列讲座，到智猿学院

Vue 3组件的Setup Context：属性、事件与插槽的封装与代理

发表回复 取消回复

发表回复取消回复