vue 封装组件 父组件根据类型渲染不同的子组件 子组件修改值时父组件获取子组件的值

在Vue中，可以通过封装组件来实现父组件根据类型渲染不同的子组件，并且子组件修改值后，父组件可以获取子组件的值。下面是一种实现方式：

首先，创建父组件（ParentComponent）和多个子组件（ChildComponentA、ChildComponentB等）。在父组件中定义一个data属性，用于存储子组件的值。然后，在父组件的模板中使用v-if或v-for指令根据类型渲染不同的子组件。

在子组件中，可以通过props属性接收父组件传递的值，并在需要修改值的地方使用$emit方法触发一个自定义事件，将修改后的值传递给父组件。

以下是一个示例代码：

<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component-a v-if="type === 'A'" @value-updated="handleValueUpdated" />
    <child-component-b v-else-if="type === 'B'" @value-updated="handleValueUpdated" />
    <!-- 其他子组件... -->
  </div>
</template>

<script>
import ChildComponentA from './ChildComponentA.vue';
import ChildComponentB from './ChildComponentB.vue';

export default {
  components: {
    ChildComponentA,
    ChildComponentB,
    // 其他子组件...
  },
  data() {
    return {
      type: 'A', // 根据类型渲染不同的子组件
      value: '', // 存储子组件的值
    };
  },
  methods: {
    handleValueUpdated(newValue) {
      this.value = newValue; // 子组件修改值时更新父组件的值
    },
  },
};
</script>

<!-- ChildComponentA.vue -->
<template>
  <div>
    <!-- 子组件A的内容 -->
    <button @click="updateValue">修改值</button>
  </div>
</template>

<script>
export default {
  methods: {
    updateValue() {
      const newValue = '新的值'; // 子组件A修改的值
      this.$emit('value-updated', newValue); // 触发自定义事件，将修改后的值传递给父组件
    },
  },
};
</script>

<!-- ChildComponentB.vue -->
<template>
  <div>
    <!-- 子组件B的内容 -->
    <input type="text" v-model="value" @input="updateValue" />
  </div>
</template>

<script>
export default {
  props: ['value'], // 接收父组件传递的值
  methods: {
    updateValue(event) {
      const newValue = event.target.value; // 子组件B修改的值
      this.$emit('value-updated', newValue); // 触发自定义事件，将修改后的值传递给父组件
    },
  },
};
</script>

在上述示例中，父组件根据type的值来决定渲染哪个子组件。子组件A通过点击按钮来修改值，并通过$emit方法触发value-updated事件将修改后的值传递给父组件。子组件B通过输入框来修改值，并通过$emit方法触发value-updated事件将修改后的值传递给父组件。