子组件向父组件传值vue

Vue中实现子组件向父组件传值可以通过以下几种方式实现：
1. 使用$emit方法：在子组件中使用$emit方法触发一个事件，并将需要传递的数据作为参数传递给$emit方法。在父组件中通过在子组件标签上绑定的自定义事件来接收这个事件，可以通过事件参数获取传递的数据。具体实现可以参考以下代码：
引用[3]:1.子组件：

<template>
  <div>
    <button @click="sendData">向父组件传递数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello'
    }
  },
  methods: {
    sendData() {
      this.$emit('send-message', this.message)
    }
  }
}
</script>

引用[1]:2.父组件：

<template>
  <div>
    <child @send-message="getMessage"></child>
    <div>{{receivedMessage}}</div>
  </div>
</template>

<script>
import child from './child'

export default {
  components: {
    child
  },
  data() {
    return {
      receivedMessage: ''
    }
  },
  methods: {
    getMessage(message) {
      this.receivedMessage = message
    }
  }
}
</script>

2.使用$parent：在子组件中可以通过$parent访问父组件的实例，从而直接修改父组件的数据。但是这种方式的使用会让子组件与父组件耦合度过高，不够灵活，因此在实际开发中不建议使用。

相关问题:
--相关问题--: