vue2和vue3区别，传值方式。

Vue 2 和 Vue 3 的最大区别是它们的构建模式。Vue 2 使用的是模板构建模式，而 Vue 3 使用的是响应式编程构建模式。Vue 2 使用的是 prop 传值，Vue 3 则使用的是响应式 API 来传值。

相关问题

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提供了更灵活的方式来实现父子组件之间的传值。

vue2和vue3的传值

Vue2和Vue3的传值方式有所不同，具体如下：

Vue2的传值方式：
1. 父组件向子组件传值：使用props进行传值。
2. 子组件向父组件传值：使用$emit触发父组件的自定义事件。
3. 非父子组件之间的传值：使用一个空的Vue实例作为中央事件总线，通过$emit和$on进行传值。

Vue3的传值方式：
1. 父组件向子组件传值：仍然使用props进行传值，但是可以使用v-bind缩写语法。
2. 子组件向父组件传值：使用emits选项声明子组件可以触发的事件，然后使用$emit触发事件。
3. 非父子组件之间的传值：使用provide和inject进行传值，provide可以在父组件中提供数据，inject可以在子组件中注入数据。

下面是一个Vue3组件通信的例子：

<template>
  <div>
    <child :message="message" @update="handleUpdate"></child>
    <p>父组件收到子组件的消息：{{ message }}</p>
  </div>
</template>

<script>
import { ref } from 'vue'
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  setup() {
    const message = ref('Hello, child!')
    const handleUpdate = (newMessage) => {
      message.value = newMessage
    }
    return {
      message,
      handleUpdate
    }
  }
}
</script>

<template>
  <div>
    <p>子组件收到父组件的消息：{{ message }}</p>
    <button @click="handleClick">向父组件发送消息</button>
  </div>
</template>

<script>
import { defineEmits, defineProps } from 'vue'

export default {
  props: {
    message: String
  },
  emits: ['update'],
  setup(props, { emit }) {
    const handleClick = () => {
      emit('update', 'Hello, parent!')
    }
    return {
      handleClick
    }
  }
}
</script>