vue子组件向父组件传值其他案例

当子组件想要向父组件传递数据时，需要使用事件机制。具体实现步骤如下：

1. 在子组件中定义一个事件，在需要传递数据的地方触发该事件

// ChildComponent.vue
<template>
  <button @click="sendData">传递数据给父组件</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('childToParent', '这是子组件传递给父组件的数据')
    }
  }
}
</script>

2. 在父组件中监听该事件，并处理接收到的数据

// ParentComponent.vue
<template>
  <div>
    <h1>{{dataFromChild}}</h1>
    <child-component @childToParent="handleChildData"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      dataFromChild: ''
    }
  },
  methods: {
    handleChildData(data) {
      this.dataFromChild = data
    }
  }
}
</script>

在上面的代码中，子组件通过 `$emit` 方法触发了名为 `childToParent` 的自定义事件，并将数据 `'这是子组件传递给父组件的数据'` 作为参数传递给了父组件。在父组件中，我们监听了该事件，并在 `handleChildData` 方法中接收到了子组件传递过来的数据，并将其赋值给 `dataFromChild`，从而实现了子组件向父组件传递数据的功能。