vue 子组件中点击事件父组件向子组件传值

在 Vue 中，父组件向子组件传值可以使用 props，而子组件向父组件传值可以使用自定义事件。

具体实现步骤如下：

1. 在父组件中定义一个数据属性，将要传递给子组件的值绑定到该属性上。

2. 在子组件中通过 props 接收父组件传递过来的值。

3. 在子组件中创建一个方法，触发该方法时，通过 $emit 方法向父组件发送一个自定义事件，并将子组件中需要传递给父组件的值作为参数传递给该事件。

下面是代码示例：

父组件：

<template>
  <div>
    <child :value="value" @child-click="handleClick"></child>
  </div>
</template>

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

export default {
  components: {
    Child
  },
  data() {
    return {
      value: 'hello'
    }
  },
  methods: {
    handleClick(value) {
      console.log(value)
    }
  }
}
</script>

子组件：

<template>
  <div>
    <button @click="handleClick">点击向父组件传值</button>
  </div>
</template>

<script>
export default {
  props: {
    value: String
  },
  methods: {
    handleClick() {
      this.$emit('child-click', this.value)
    }
  }
}
</script>

在子组件中，我们使用 props 接收了父组件传递过来的值 value，然后在 handleClick 方法中，通过 $emit 方法触发了一个名为 child-click 的自定义事件，并将子组件中需要传递给父组件的值作为参数传递给该事件。在父组件中，我们监听了该自定义事件，并通过 @child-click="handleClick" 绑定了一个名为 handleClick 的方法，该方法接收了子组件传递过来的值 value，并将其输出到控制台中。