vue中子组件调用父组件参数

在 Vue 中，子组件可以通过 props 接收来自父组件的参数，也可以通过 $emit 发送事件给父组件，从而将数据传递给父组件。

以下是通过 props 将数据从父组件传递给子组件的示例代码：

父组件：

<template>
  <div>
    <child-component :message="parentMessage" />
  </div>
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: 'Hello from parent component!'
    };
  }
};
</script>

子组件：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
};
</script>

在这个例子中，我们在父组件中定义了一个名为 parentMessage 的数据属性，并将其传递给了子组件 ChildComponent。在子组件中，我们通过 props 接收了父组件传递过来的 message 参数，并在模板中渲染出来。

以下是通过 $emit 事件将数据从子组件发送给父组件的示例代码：

父组件：

<template>
  <div>
    <child-component @childEvent="handleChildEvent" />
  </div>
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    handleChildEvent(data) {
      console.log(data); // 输出来自子组件的数据
    }
  }
};
</script>

子组件：

<template>
  <div>
    <button @click="sendDataToParent">发送数据给父组件</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      this.$emit('childEvent', 'Hello from child component!');
    }
  }
};
</script>

在这个例子中，我们在子组件中定义了一个名为 sendDataToParent 的方法，当点击按钮时，该方法通过 $emit 方法触发了一个名为 childEvent 的事件，并将数据 'Hello from child component!' 传递给父组件。在父组件中，我们通过 v-on 监听 childEvent 事件，并在方法中处理来自子组件的数据。