vue父组件点击事件向子界面传递参数再调用子组件事件

在Vue中，父组件向子组件传递参数并调用子组件事件可以通过以下步骤实现：

1. 在父组件中定义一个数据属性，用于存储要传递给子组件的参数值。
2. 在父组件中定义一个方法，用于处理点击事件，并在该方法中修改存储的参数值。
3. 在父组件的模板中，使用子组件并通过props属性将参数传递给子组件。
4. 在子组件中定义一个props属性，用于接收父组件传递的参数。
5. 在子组件中定义一个方法，用于处理接收到的参数，并触发相应的事件。

下面是一个示例代码：

<!-- 父组件 -->
<template>
  <div>
    <button @click="handleClick">点击传递参数</button>
    <child-component :param="param" @child-event="handleChildEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      param: ''
    };
  },
  methods: {
    handleClick() {
      this.param = 'Hello, Child Component!';
    },
    handleChildEvent() {
      // 处理子组件事件的逻辑
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ param }}</p>
    <button @click="triggerEvent">触发子组件事件</button>
  </div>
</template>

<script>
export default {
  props: {
    param: {
      type: String,
      default: ''
    }
  },
  methods: {
    triggerEvent() {
      // 处理子组件事件的逻辑
      this.$emit('child-event');
    }
  }
};
</script>

在上述示例中，父组件通过点击按钮触发`handleClick`方法，将参数值赋给`param`属性。然后，通过`param`属性将参数传递给子组件。子组件接收到参数后，可以在模板中显示参数值，并通过点击按钮触发`triggerEvent`方法，最终触发父组件中的`handleChildEvent`方法。