vue子组件向父组件传参的方式

无妄的罪2023-09-18 23:49

在Vue中，子组件向父组件传递参数可以通过自定义事件和props属性来实现。下面是一些关键代码示例：

1. 使用自定义事件：

在子组件中，通过 $emit 方法触发一个自定义事件，并传递参数。

复制代码

<template>
  <button @click="sendData">传递参数</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('custom-event', 'Hello, Parent!'); // 触发custom-event事件并传递参数
    }
  }
}
</script>

在父组件中，监听子组件的自定义事件，并在相应的方法中接收参数。

复制代码

<template>
  <div>
    <child-component @custom-event="handleData"></child-component>
    <p>从子组件接收到的参数：{{ receivedData }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedData: ''
    };
  },
  methods: {
    handleData(data) {
      this.receivedData = data; // 接收子组件传递的参数
    }
  }
}
</script>

2. 使用props属性：

在父组件中，通过props属性将数据传递给子组件。

复制代码

<template>
  <div>
    <child-component :data-from-parent="dataToSend"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      dataToSend: 'Hello, Child!'
    };
  }
}
</script>

在子组件中，使用props属性接收父组件传递的参数。

复制代码

<template>
  <div>
    <p>从父组件接收到的参数：{{ dataFromParent }}</p>
  </div>
</template>

<script>
export default {
  props: ['dataFromParent']
}
</script>

上述代码示例展示了两种常用的方式来实现子组件向父组件传递参数。根据具体的需求和场景，您可以选择其中一种方式来实现