vue3+ts 怎么实现子组件给父组件传参？

步骤

1. 创建父组件：在父组件中监听子组件的事件并处理传递的参数。
2. 创建子组件：在子组件中使用 emit 方法发送事件和参数。

示例代码

1. 父组件

<template>
  <div>
    <h1>父组件</h1>
    <p>接收到的消息: {{ message }}</p>
    <ChildComponent @sendMessage="handleMessage" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default defineComponent({
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: '', // 用于存储从子组件接收到的消息
    };
  },
  methods: {
    handleMessage(newMessage: string) {
      this.message = newMessage; // 更新消息
    },
  },
});
</script>

2. 子组件

<template>
  <div>
    <h2>子组件</h2>
    <button @click="sendMessage">发送消息给父组件</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'ChildComponent',
  methods: {
    sendMessage() {
      // 使用 $emit 发送事件和参数
      this.$emit('sendMessage', 'Hello from Child Component!');
    },
  },
});
</script>

代码解释

1. 父组件：

   • 在父组件中，使用 @sendMessage 指令监听来自子组件的 sendMessage 事件。
   • 当事件被触发时，调用 handleMessage 方法，并将传递的参数存储在 message 数据属性中。

2. 子组件：

   • 在子组件中，定义一个 sendMessage 方法，该方法在按钮点击时被调用。
   • 使用 this.$emit('sendMessage', 'Hello from Child Component!') 发送事件和消息字符串。

标签：
来源：