在 Vue js 中渲染动态组件需要帮助

Question

您好，我遇到了以下情况。我有父组件（健康档案），它列出了子组件，每个子组件上都有添加按钮。我想让应用程序这样一种方式，即当用户单击添加按钮时，只打开该特定组件的表单，其余部分关闭，反之亦然。我无法使用 v-bind:is 因为按钮在子组件中并且它向父组件发送数据。任何帮助将不胜感激。附上截图 Health Profile Component with each subcomponent having button that fires emmit data type

Answer 1

下次请提供代码片段以更好地理解您的代码

您可以使用事件总线在整个项目中传播按钮点击。

// event-bus.js
import Vue from 'vue';
const EventBus = new Vue();
export default EventBus;

然后将其导入您的组件

// component-a.js
import Vue from 'vue';
import EventBus from './event-bus';
Vue.component('component-a', {
...
methods: {
  emitMethod () {
    EventBus.$emit('EVENT_NAME', payLoad);
  }
}
});

看看这个article

在 Vue js 中渲染动态组件需要帮助

Need Help in Rendering Dynamic Component in Vue js

javascript

vue.js

vue-dynamic-components