Vue父组件与子组件相互传参

Vue父组件与子组件相互传参

子组件向父组件传递参数的过程：

父组件：

<template>
  <div>
    <h2>父组件</h2>
    <p>接收到的参数：{{ receivedParam }}</p>
    <ChildComponent @customEvent="handleCustomEvent" />
    <!-- 或者可以使用 v-on 指令 -->
    <!-- <ChildComponent v-on:customEvent="handleCustomEvent" /> -->
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedParam: ''
    };
  },
  methods: {
    handleCustomEvent(param) {
      this.receivedParam = param;
    }
  }
};
</script>

子组件：

<template>
  <div>
    <h2>子组件</h2>
    <button @click="sendParam">传递参数</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendParam() {
      const param = 'Hello, Parent!';
      // 通过 $emit 方法触发自定义事件，并传递参数
      this.$emit('customEvent', param);
    }
  }
};
</script>

在这个示例中，父组件中的ChildComponent是子组件，通过监听子组件的自定义事件customEvent，并在方法handleCustomEvent中接收传递的参数。在子组件中，通过$emit方法触发自定义事件，并传递参数param。

当在子组件中点击按钮时，将会触发sendParam方法，该方法会通过$emit触发自定义事件customEvent，并将参数传递给父组件。父组件中的handleCustomEvent方法会接收到传递的参数，并更新receivedParam的值，从而在父组件中显示出来。

请注意，父组件中通过@customEvent="handleCustomEvent"或v-on:customEvent="handleCustomEvent"监听子组件的自定义事件，其中customEvent是自定义事件的名称，可以根据需要进行命名。

父组件向子组件传递参数主要通过props属性实现

父组件：

<template>
  <div>
    <h2>父组件</h2>
    <ChildComponent :parentData="dataFromParent" />
    <!-- 或者可以使用 v-bind 指令 -->
    <!-- <ChildComponent v-bind:parentData="dataFromParent" /> -->
  </div>
</template>

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

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

子组件：

<template>
  <div>
    <h2>子组件</h2>
    <p>接收到的参数：{{ childData }}</p>
  </div>
</template>

<script>
export default {
  props: {
    parentData: {
      type: String,
      required: true
    }
  },
  computed: {
    childData() {
      return this.parentData;
    }
  }
};
</script>

在这个示例中，父组件通过dataFromParent属性传递一个字符串给子组件。在子组件中，通过props属性定义parentData属性，指定属性的类型为String，并且标记为必需。然后在子组件的计算属性childData中，可以使用parentData属性接收父组件传递的数据，并在子组件中使用它。

通过:parentData="dataFromParent"或v-bind:parentData="dataFromParent"，将dataFromParent数据绑定到子组件的parentData属性上，从而完成了父组件向子组件的参数传递。

在子组件中，可以通过this.parentData来访问传递的参数。