vue2和vue3父子传值的区别

在Vue2和Vue3中，父子组件之间传值的方式有一些区别。

在Vue2中，父组件可以通过props属性将数据传递给子组件，子组件通过props选项来接收父组件传递过来的值。父组件可以在模板中使用v-bind指令来传递数据，子组件可以通过props选项来定义接收的属性。

示例代码如下：

父组件：

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

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

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

子组件：

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

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

在Vue3中，引入了Composition API，可以使用ref和reactive等函数来创建响应式数据，并使用provide和inject函数来进行父子组件之间的传值。

示例代码如下：

父组件：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import { provide, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  setup() {
    const message = ref('Hello from parent component');
    provide('message', message);

    return {
      message
    };
  },
  components: {
    ChildComponent
  }
};
</script>

子组件：

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

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

export default {
  setup() {
    const message = inject('message');

    return {
      message
    };
  }
};
</script>

所以，Vue3中使用Composition API提供了更灵活的方式来实现父子组件之间的传值。