vue3组件动态传值

在 Vue 3 中，组件动态传值通常涉及到 prop 的使用以及使用响应式的数据绑定机制。Vue 提供了两种主要的方式来传递和管理组件间的动态数据：

1. **Props**（属性）：从父组件向子组件传递数据是通过 props 实现的。父组件可以在 `<child-component :prop="value" />` 中动态地传入一个变量 `value`。如果需要子组件能够改变这个值，通常建议将其设置为 `emits` 对象的形式，以便于触发自定义事件通知父组件。

<template>
  <ChildComponent :value="dynamicValue" @update-value="handleUpdateValue"></ChildComponent>
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      dynamicValue: 'default value',
    };
  },
  methods: {
    handleUpdateValue(newValue) {
      this.dynamicValue = newValue;
    }
  },
};
</script>

2. **Composition API** 或者 **Ref** 和 ** reactive**: 当你需要在组件内部创建并更新数据时，可以使用 Ref 和 computed、reactive 等函数。例如：

<template>
  <input v-model="inputValue" />
</template>

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

export default {
  setup(props, context) {
    const inputValue = ref('');
    
    // 更新值时，可以监听 input 变化或直接赋值
    context.emit('update:value', inputValue.value);
    
    return {
      inputValue,
    };
  },
};
</script>