Vue3父子组件传属性和方法调用Demo

在Vue3中，父子组件之间的通讯是一项核心功能，它可以通过 props（父组件向子组件传值）和事件（子组件向父组件传值）来实现。本文将通过一个简单的示例来展示如何使用 Vue3 的父子组件传递属性和方法调用。

项目结构

为了阐述清楚，首先我们需要明确项目的结构：

src/
|-- components/
|   |-- ParentComponent.vue
|   |-- ChildComponent.vue
|-- App.vue

ParentComponent.vue

在父组件中，我们将创建一个方法和一个属性，并利用 props 将属性传递给子组件，另外通过 v-on 来监听子组件发出的事件。

<template>
  <div>
    <h1>父组件</h1>
    <p>父组件的消息：{{ parentMessage }}</p>
    <button @click="changeMessage">改变父组件消息</button>

    <ChildComponent 
      :message="parentMessage" 
      @askForChange="handleChange" 
    />
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentMessage: 'Hello from Parent!',
    };
  },
  methods: {
    changeMessage() {
      this.parentMessage = 'Message updated from Parent!';
    },
    handleChange(newMessage) {
      this.parentMessage = newMessage;
    }
  },
};
</script>

<style scoped>
/* 你可以在这里编写父组件的样式 */
</style>

在上面的 ParentComponent.vue 组件中： - 我们定义了一个 parentMessage，用于展示父组件的消息。 - changeMessage 方法用于更新 parentMessage。 - 我们将 parentMessage 作为 props 传递给了 ChildComponent 组件，同时监听子组件发出的 askForChange 事件。

ChildComponent.vue

接下来我们来创建子组件，接收来自父组件的 props，并定义一个方法在需要的时候向父组件发送事件。

<template>
  <div>
    <h2>子组件</h2>
    <p>来自父组件的消息：{{ message }}</p>
    <button @click="requestChange">请求修改父组件消息</button>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true,
    },
  },
  methods: {
    requestChange() {
      this.$emit('askForChange', 'Hello from Child!');
    },
  },
};
</script>

<style scoped>
/* 你可以在这里编写子组件的样式 */
</style>

在 ChildComponent.vue 组件中： - 我们通过 props 接收来自父组件的 message。 - requestChange 方法用于触发 askForChange 事件，并将新的消息内容发送给父组件。

App.vue

最后，我们将父组件添加到 App.vue 中。

<template>
  <div id="app">
    <ParentComponent />
  </div>
</template>

<script>
import ParentComponent from './components/ParentComponent.vue';

export default {
  components: {
    ParentComponent,
  },
};
</script>

<style>
/* 应用样式 */
</style>

总结

在这个简单的示例中，我们展示了如何在 Vue3 中实现父子组件之间的 props 传递和事件通信。父组件通过 props 向子组件传递数据，子组件又通过 $emit 将事件和数据返回给父组件。这种方式能够创建一个清晰的、可维护的组件结构，是 Vue.js 中组件交互的常用模式。

通过这样的父子组件架构，可以灵活地管理状态和行为，使得用户界面变得更动态和响应式。希望这个示例能为你在 Vue3 中的开发提供帮助。