vue0子组件调用父组件方法并且传值

在Vue.js中，子组件可以通过使用`$emit`方法来调用父组件的方法，并且可以传递参数给父组件的方法。

以下是一个示例代码，展示了子组件如何调用父组件的方法并传递值：

<template>
  <button @click="handleClick">调用父组件方法</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 通过 $emit 方法调用父组件的方法，并传递参数
      this.$emit('custom-event', 'Hello from child component')
    }
  }
}
</script>

在父组件中，你可以通过在子组件上监听自定义事件来接收子组件传递的值和调用父组件的方法。例如：

<template>
  <div>
    <child-component @custom-event="handleCustomEvent"></child-component>
    <p>从子组件接收到的值：{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    handleCustomEvent(value) {
      // 接收子组件传递的值
      this.message = value
      // 调用父组件的方法
      this.parentMethod()
    },
    parentMethod() {
      // 父组件的方法逻辑
      console.log('父组件方法被调用')
    }
  }
}
</script>

在上述示例中，子组件通过`$emit`方法触发了名为`custom-event`的自定义事件，并传递了一个字符串参数。父组件通过在子组件上监听`custom-event`事件来接收子组件传递的值，并在`handleCustomEvent`方法中处理接收到的值和调用父组件的方法。