vue3父子组件传值props,emits

精选原创

牛掰666 2024-05-26 21:23:13 ©著作权

©著作权归作者所有：来自51CTO博客作者牛掰666的原创作品，请联系作者获取转载授权，否则将追究法律责任

在 Vue 3 中，父子组件之间的通信通常通过 props 和 emits 来实现。props 用于从父组件向子组件传递数据，而 emits 则用于子组件向父组件发送事件和数据。下面是一个详细的示例，展示了如何使用 props 和 emits 在 Vue 3 中进行父子组件传值。

示例项目结构

假设我们的项目结构如下：

src/
  components/
    ChildComponent.vue
  App.vue
main.js

1. 从父组件向子组件传值 (props)

ChildComponent.vue

在子组件中，我们定义一个 props 接收来自父组件的数据：

<template>
  <div>
    <p>Message from parent: {{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

<style scoped>
/* 样式代码 */
</style>

App.vue

在父组件中，我们使用 props 向子组件传递数据：

<template>
  <div id="app">
    <h1>Vue 3 Props and Emits Example</h1>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

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

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

<style>
/* 样式代码 */
</style>

2. 从子组件向父组件发送事件 (emits)

ChildComponent.vue

在子组件中，我们定义一个方法来发送事件给父组件：

<template>
  <div>
    <p>Message from parent: {{ message }}</p>
    <button @click="sendMessageToParent">Send Message to Parent</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: {
      type: String,
      required: true
    }
  },
  emits: ['messageFromChild'],
  methods: {
    sendMessageToParent() {
      this.$emit('messageFromChild', 'Hello from child!');
    }
  }
};
</script>

<style scoped>
/* 样式代码 */
</style>

App.vue

在父组件中，我们监听子组件发送的事件并处理它：

<template>
  <div id="app">
    <h1>Vue 3 Props and Emits Example</h1>
    <ChildComponent :message="parentMessage" @messageFromChild="handleMessageFromChild" />
    <p>Message from child: {{ childMessage }}</p>
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent!',
      childMessage: ''
    };
  },
  methods: {
    handleMessageFromChild(message) {
      this.childMessage = message;
    }
  }
};
</script>

<style>
/* 样式代码 */
</style>