vue2组件传值子传父

在Vue2中，子组件向父组件传递值可以使用事件机制。下面是一个简单的示例：

1. 在子组件中，使用`$emit`方法触发一个自定义事件，并且将需要传递给父组件的值作为参数传递：

// 子组件
<template>
  <button @click="passValue">传递值给父组件</button>
</template>

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

2. 在父组件中，使用`v-on`指令监听子组件触发的自定义事件，并在对应的方法中接收传递过来的值：

// 父组件
<template>
  <div>
    <p>从子组件接收的值：{{ receivedValue }}</p>
    <child-component @value="handleValue"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedValue: ''
    }
  },
  methods: {
    handleValue(value) {
      this.receivedValue = value;
    }
  }
}
</script>

在上述示例中，子组件通过`$emit`方法触发了一个名为`value`的自定义事件，并传递了一个字符串作为参数。父组件中通过`v-on`指令监听到了这个自定义事件，并在对应的方法中接收到了传递过来的值，然后将其赋值给`receivedValue`变量。最后，在父组件的模板中显示了接收到的值。

这样，子组件就成功地将值传递给了父组件。