Vue3 子组件向父组件传值的方法

Vue3 子组件向父组件传值的方法

有两种方式可以实现。

方式一：父组件传送一个处理方法给子组件，子组件调用这个处理方法把父组件关心的值作为参数传给这个处理方法。

子组件

<template>
  <div>
    <h3>子组件</h3>
    <input type="text" v-model="inputValue" placeholder="输入要传递的值" />
    <button @click="handleClick">传递给父组件</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    childClick: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleClick() {
      this.childClick(this.inputValue); // 调用父组件传递的方法，并传递 inputValue
    }
  }
};
</script>

父组件

<template>
  <div>
    <h2>父组件</h2>
    <ChildComponent :childClick="handleChildClick" />
    <p>父组件接收的值：{{ receivedValue }}</p>
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedValue: ''
    };
  },
  methods: {
    handleChildClick(value) {
      console.log('子组件点击了：', value);
      this.receivedValue = value; // 更新父组件的 receivedValue
    }
  }
};
</script>

方式二：子组件发送emit方法给父组件

在子组件里，就两步要做：1. 定义emits事件，2，在想要的时机发送emits事件

子组件

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

<script>
export default {
  name: 'ChildComponent',
  methods: {
    sendMessageToParent() {
      // 触发一个名为 'messageToParent' 的自定义事件，并传递一个数据对象
      this.$emit('messageToParent', { 
        message: 'Hello Parent!'
      });
    }
  }
};
</script>

父组件

 

<template>
  <div>
    <h2>父组件</h2>
    <p>从子组件接收的消息：{{ receivedMessage }}</p>
    <ChildComponent @messageToParent="handleMessageFromChild" />
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedMessage: ''
    };
  },
  methods: {
    handleMessageFromChild(payload) {
      console.log('父组件收到来自子组件的消息：', payload);
      this.receivedMessage = payload.message; // 更新父组件的 receivedMessage
    }
  }
};
</script>