vue子组件向父组件传值

在 Vue 中，子组件向父组件传值的方式有两种：

1. 使用 $emit 事件

在子组件中使用 `$emit` 方法触发一个自定义事件，并传递需要向父组件传递的值，父组件中通过监听该自定义事件来接收传递的值。例如：

<template>
  <button @click="sendValueToParent">向父组件传递值</button>
</template>

<script>
export default {
  methods: {
    sendValueToParent() {
      this.$emit('send-value', '这是传递给父组件的值');
    }
  }
}
</script>

在父组件中监听子组件的自定义事件，并接收子组件传递的值：

<template>
  <div>
    <child-component @send-value="receiveValueFromChild"></child-component>
    <p>从子组件接收到的值：{{valueFromChild}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      valueFromChild: ''
    }
  },
  methods: {
    receiveValueFromChild(value) {
      this.valueFromChild = value;
    }
  }
}
</script>

2. 使用 .sync 修饰符

通过在父组件中使用 `.sync` 修饰符，可以实现子组件向父组件双向绑定传值。例如：

<template>
  <div>
    <child-component :value.sync="valueFromParent"></child-component>
    <p>从子组件接收到的值：{{valueFromParent}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      valueFromParent: ''
    }
  }
}
</script>

在子组件中通过 `$emit` 方法触发一个自定义事件，父组件中使用 `.sync` 修饰符将子组件自定义事件转化为一个属性，来实现双向绑定传值：

<template>
  <button @click="sendValueToParent">向父组件传递值</button>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  methods: {
    sendValueToParent() {
      this.$emit('update:value', '这是传递给父组件的值');
    }
  }
}
</script>