Vue 使用 component 进行组件显示的时候如何动态修改组件数据？

导语
  Vue.js 是一个流行的前端框架，而 ElementUI 是一个基于 Vue.js 的高质量 UI 组件库。要在 Vue 中动态控制 ElementUI 组件，您通常需要使用 Vue 的数据绑定和条件渲染功能。

如何实现Element动态组件控制？

  使用 component 标签和 :is 属性，您可以动态地选择并渲染不同的 ElementUI 组件。

<template>  
  <div>  
    <component :is="currentComponent"></component>  
    <el-button @click="changeComponent">切换组件</el-button>  
  </div>  
</template>  
  
<script>  
import { ElButton, ElInput, ElSelect } from 'element-ui';  
  
export default {  
  components: {  
    ElButton,  
    ElInput,  
    ElSelect  
  },  
  data() {  
    return {  
      currentComponent: 'ElInput'  
    };  
  },  
  methods: {  
    changeComponent() {  
      this.currentComponent = this.currentComponent === 'ElInput' ? 'ElSelect' : 'ElInput';  
    }  
  }  
};  
</script>

  这些只是动态控制 ElementUI 组件的一些基本示例。您可以根据具体需求，结合 Vue 的其他功能（如计算属性、侦听器、过渡等）来创建更复杂的动态 UI。

使用 component 进行组件显示的时候如何动态修改组件数据

  在 Vue 中，如果你使用 动态地切换组件，并且想要动态地修改这些组件的数据，你通常需要通过几种不同的方法来实现。以下是一些常见的方法：

使用 v-model（适用于表单组件）

  如果你动态切换的组件是表单组件（如 ElInput、ElCheckbox 等），并且你想要双向绑定数据，你可以使用 v-model。

<template>  
  <div>  
    <component :is="currentComponent" v-model="inputValue"></component>  
    <el-button @click="changeComponent">切换组件</el-button>  
  </div>  
</template>  
  
<script>  
import { ElInput, ElSelect } from 'element-ui';  
  
export default {  
  components: {  
    ElInput,  
    ElSelect  
  },  
  data() {  
    return {  
      currentComponent: 'ElInput',  
      inputValue: '' // 这个数据会被双向绑定到当前激活的组件上  
    };  
  },  
  methods: {  
    changeComponent() {  
      // 切换组件逻辑  
      this.currentComponent = this.currentComponent === 'ElInput' ? 'ElSelect' : 'ElInput';  
    }  
  }  
};  
</script>

使用 props 向子组件传递数据

  如果你需要向动态组件传递数据，并且这些组件不是表单组件，你可以使用 props

<template>  
  <div>  
    <component :is="currentComponent" :dataToChild="dataForChild"></component>  
    <el-button @click="changeComponent">切换组件</el-button>  
  </div>  
</template>  
  
<script>  
import { ElButton, CustomComponent } from 'path-to-your-components';  
  
export default {  
  components: {  
    ElButton,  
    CustomComponent  
  },  
  data() {  
    return {  
      currentComponent: 'CustomComponent',  
      dataForChild: { message: 'Hello from parent' } // 要传递给子组件的数据  
    };  
  },  
  methods: {  
    changeComponent() {  
      // 切换组件逻辑  
      this.currentComponent = this.currentComponent === 'CustomComponent' ? 'ElButton' : 'CustomComponent';  
    }  
  }  
};  
</script>

  在子组件中，你可以通过 props 选项来接收这些数据

<template>  
  <div>  
    <p>{{ dataToChild.message }}</p>  
  </div>  
</template>  
  
<script>  
export default {  
  props: {  
    dataToChild: {  
      type: Object,  
      required: true  
    }  
  }  
};  
</script>

使用事件向父组件传递数据

  如果动态组件需要向父组件传递数据，你可以使用自定义事件（$emit）。
  在子组件中使用如下的方式来进行操作？

<template>  
  <div>  
    <button @click="notifyParent">通知父组件</button>  
  </div>  
</template>  
  
<script>  
export default {  
  methods: {  
    notifyParent() {  
      const data = { message: 'Hello from child' };  
      this.$emit('custom-event', data);  
    }  
  }  
};  
</script>

  在父组件中监听这个自定义的事件

<template>  
  <div>  
    <component :is="currentComponent" @custom-event="handleChildEvent"></component>  
    <el-button @click="changeComponent">切换组件</el-button>  
  </div>  
</template>  
  
<script>  
// ... 省略其他代码 ...  
  
methods: {  
  handleChildEvent(data) {  
    console.log(data); // 打印从子组件传递过来的数据  
  },  
  // ... 省略其他方法 ...  
}

总结

  以上就完成了通过component 进行组件显示的时候如何动态修改组件数据操作，希望能帮助到大家