Vue 父子页面使用指南

Vue3父子页面使用指南

Vue3作为一种现代化的前端框架，提供了强大的组件化功能，使得页面开发更加模块化和可维护。本文将深入探讨Vue3中父子页面的使用方法，包括如何传递参数、父组件如何调用子组件的方法，以及父子页面的加载原理。

1. 父子页面的基本概念

在Vue3中，页面被拆分成多个组件，每个组件都可以看作是一个独立的页面单元。父子组件之间的通信和交互是Vue开发中的基础部分。

2. 传递参数给子组件

2.1 Props属性传递

Props是Vue中父子组件通信的标准方式，通过在子组件上声明props来接收父组件传递的数据。

在父组件中通过props属性向子组件传递数据，示例代码如下：

// ParentComponent.vue
<template>
  <ChildComponent :message="parentMessage" />
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentMessage: 'Hello from Parent',
    };
  },
};
</script>

// ChildComponent.vue
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: String,
  },
};
</script>

2.2 使用Provide/Inject API

Provide/Inject API允许跨多层级传递数据，适用于复杂组件结构。

// ParentComponent.vue
<template>
  <div>
    <GrandparentComponent />
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  setup() {
    provide('message', 'Hello from Parent');
  },
};
</script>

// ChildComponent.vue
<template>
  <div>
    <ChildGrandComponent />
  </div>
</template>

<script>
import { inject } from 'vue';
import ChildGrandComponent from './ChildGrandComponent.vue';

export default {
  components: {
    ChildGrandComponent,
  },
  setup() {
    const message = inject('message');
    return {
      message,
    };
  },
};
</script>

3. 父组件调用子组件的方法

有时候，父组件需要调用子组件中的方法来实现特定的功能。Vue3中可以通过ref来获取子组件的实例，并调用其方法。

// ParentComponent.vue
<template>
  <div>
    <ChildComponent ref="childRef" />
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  setup() {
    const childRef = ref(null);

    function callChildMethod() {
      childRef.value.childMethod();
    }

    return {
      childRef,
      callChildMethod,
    };
  },
};
</script>

// ChildComponent.vue
<template>
  <div>子组件内容</div>
</template>

<script>
export default {
  methods: {
    childMethod() {
      console.log('子组件方法被调用');
    },
  },
};
</script>

4. 父子页面的加载原理

在Vue3中，父子组件的加载顺序和生命周期钩子函数的调用顺序是需要开发者了解的重要部分。父组件在渲染过程中会先完成自身的渲染和挂载，然后才会渲染和挂载子组件。

具体来说：

• 父组件的加载：当一个父组件被加载时，Vue会先执行父组件的setup()函数或beforeCreate生命周期钩子，然后执行onMounted生命周期钩子。父组件的模板在mounted阶段渲染完成后，才会开始加载子组件。

• 子组件的加载：子组件的加载顺序取决于它们在父组件模板中的位置和声明顺序。Vue会在父组件渲染期间解析子组件的定义，并在适当的时机创建和挂载子组件实例。

5. 生命周期钩子函数

在Vue3中，组件的生命周期钩子函数提供了一组钩子函数，用于在组件不同阶段执行特定的逻辑。理解这些生命周期钩子函数有助于开发者控制组件的行为和优化性能。

主要的生命周期钩子函数包括：

• beforeCreate：在实例初始化之后，数据观测 (data 和 props) 和事件配置之前被调用。

• created：实例已经创建完成之后被调用。在这一阶段，实例已完成以下的配置：数据观测 (data 和 props)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段尚未开始，$el 属性目前不可见。

• beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。

• mounted：挂载完成时被调用：这时，实例已经完成了以下的配置：数据观测，属性和方法的运算，watch/event 事件回调。然而，挂载阶段尚未开始，$el 属性目前不可见。

• beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。

• updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。

• beforeUnmount：在卸载之前调用。在这一阶段，实例仍然完全可用。

• unmounted：在卸载完成后调用。该钩子函数被调用后，组件实例指示的所有指令已被解绑，所有事件侦听器已被移除，所有子实例被销毁。

这些钩子函数允许开发者在不同的阶段执行自定义的逻辑，例如数据初始化、DOM操作、和清理资源等。

Vue 3 script setup 在父子组件通信中的应用

1. <script setup> 简介

Vue 3 引入了 <script setup> 作为定义 Vue 组件的简写方式，将 props、data、methods 和生命周期钩子封装在一个 setup 函数中。这种方式简化了组件的设置，并促进了更加函数式的编程风格。

2. 父子组件的使用

父组件：

<template>
  <div>
    <h2>父组件</h2>
    <ChildComponent :message="parentMessage" @childMethod="handleChildMethod" />
  </div>
</template>

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

const parentMessage = '来自父组件的问候！';

const handleChildMethod = () => {
  console.log('父组件收到子组件方法调用');
};
</script>

子组件 (ChildComponent.vue)：

<template>
  <div>
    <h3>子组件</h3>
    <button @click="callParentMethod">调用父组件方法</button>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  message: String
});

const emit = defineEmits(['childMethod']);

const callParentMethod = () => {
  emit('childMethod');
};
</script>

3. 参数传递

在 Vue 3 中，可以通过 props 将参数从父组件传递给子组件。

示例：

<!-- 父组件 -->
<ChildComponent :message="parentMessage" />

<!-- 子组件 -->
<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  message: String
});
</script>

4. 父组件如何调用子组件方法

父组件可以通过 Vue 的事件发射机制 ($emit) 调用子组件中定义的方法。

示例：

<!-- 子组件 -->
<template>
  <button @click="triggerParentMethod">触发父组件方法</button>
</template>

<script setup>
import { defineEmits } from 'vue';

const emit = defineEmits(['parentMethod']);

const triggerParentMethod = () => {
  emit('parentMethod');
};
</script>

<!-- 父组件 -->
<ChildComponent @parentMethod="handleChildMethod" />
<script setup>
const handleChildMethod = () => {
  console.log('父组件收到子组件方法调用');
};
</script>

结语

通过深入了解Vue3中父子页面的加载原理和生命周期钩子函数，开发者能够更好地掌握组件的工作机制和优化策略，提升应用的性能和用户体验。