vue3父组件向子组件传递参数

在Vue 3中，父组件向子组件传递参数的方式主要有以下两种：

1.使用v-bind绑定数值，然后通过props在子组件中接收使用。具体步骤如下：[^1]

- 在父组件中，使用v-bind将数值绑定到子组件上：

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

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      msg: '父组件向子组件传参示例'
    }
  }
}
</script>

- 在子组件中，使用props定义接收的属性名称，然后通过template中的插值语法将props中的数值显示出来：

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

<script>
import { defineProps } from 'vue';

export default {
  name: 'ChildComponent',
  props: {
    message: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    return {
      message: props.message
    }
  }
}
</script>

2.使用defineProps在子组件中定义props属性，然后在父组件中通过v-bind绑定数据到子组件的props属性中。具体步骤如下：

- 在子组件中，使用defineProps定义props属性接收父组件传递的参数：

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

<script>
import { defineProps } from 'vue';

export default {
  name: 'ChildComponent',
  emits: ['update:type'],
  props: defineProps({
    type: {
      type: String,
      default: 'edit'
    }
  }),
  methods: {
    updateType() {
      this.$emit('update:type', 'update');
    }
  }
}
</script>

- 在父组件中，使用v-bind绑定数值到子组件的props属性中，并在需要更新时使用v-on监听子组件的自定义事件来进行更新。

<template>
  <div>
    <child-component :type="type" @update:type="handleUpdate"></child-component>
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      type: 'edit'
    }
  },
  methods: {
    handleUpdate(data) {
      this.type = data;
    }
  }
}
</script>