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

【问题标题】：Need Help in Rendering Dynamic Component in Vue js在 Vue js 中渲染动态组件需要帮助
【发布时间】：2021-04-25 03:32:46
【问题描述】：

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

【问题讨论】：

你可能应该使用 v-bind:is。您给出的无法使用 v-bind 的原因很容易通过发出和响应事件来解决。

标签： javascript vue.js vue-dynamic-components

【解决方案1】：

下次请提供代码 sn-p 以便更好地理解您的代码

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

// 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

【讨论】：