Vue 一个案例引发的动态组件与全局事件绑定总结

2024-01-01 15:17:53

前言

最近在自学 Vue，也了解了一些基本用法，也记录了一些笔记。有兴趣的朋友可以去查看我的其他文章，技术这东西真的不能光靠看，看是没有用的，你必须要动手实践，只有在实战项目中才能发现问题，才能发现我们没有掌握的知识点，然后发现问题解决问题，我们的能力才能得以提升，要不然就有点眼高手低了。

正文

动态组件

动态组件是指在运行时可以动态创建和销毁的组件。Vue 提供了两种方式来创建动态组件：

使用 v-for 指令
使用 render 函数

使用 v-for 指令

使用 v-for 指令可以根据数据循环创建组件实例。例如：

<div>
  <component v-for="component in components" :is="component"></component>
</div>

在这个例子中，components 是一个数组，其中包含要创建的组件名称。v-for 指令会遍历 components 数组，并为每个元素创建一个组件实例。

使用 render 函数

使用 render 函数可以更加灵活地创建动态组件。例如：

export default {
  render(h) {
    return h(component, { props: this.props });
  }
}

在这个例子中，component 是一个组件的构造函数，props 是要传递给组件的属性。render 函数会返回一个组件实例。

全局事件

全局事件是指可以在任何组件中触发的事件。Vue 提供了两种方式来绑定全局事件：

使用 Vue.prototype.$on() 方法
使用 Vue.prototype.$emit() 方法

使用 Vue.prototype.$on() 方法

使用 Vue.prototype.$on() 方法可以在任何组件中监听全局事件。例如：

Vue.prototype.$on('global-event', function(data) {
  // 处理事件数据
});

在这个例子中，global-event 是要监听的全局事件名称。

使用 Vue.prototype.$emit() 方法

使用 Vue.prototype.$emit() 方法可以在任何组件中触发全局事件。例如：

this.$emit('global-event', data);

在这个例子中，global-event 是要触发的全局事件名称，data 是要传递的事件数据。

案例

下面是一个使用 Vue 创建动态组件和全局事件绑定的案例。

HTML 代码

<div id="app">
  <div v-for="component in components" :is="component"></div>
  <button @click="emitGlobalEvent">触发全局事件</button>
</div>

JavaScript 代码

const app = new Vue({
  el: '#app',
  data: {
    components: ['component-a', 'component-b'],
    globalEventData: '这是全局事件数据'
  },
  methods: {
    emitGlobalEvent() {
      this.$emit('global-event', this.globalEventData);
    }
  }
});

组件代码

// component-a.vue
export default {
  template: '<div>组件 A</div>'
};

// component-b.vue
export default {
  template: '<div>组件 B</div>'
};

全局事件处理函数

Vue.prototype.$on('global-event', function(data) {
  console.log('收到了全局事件数据：', data);
});

在这个案例中，我们使用 v-for 指令创建了两个动态组件，分别是 component-a 和 component-b。我们还使用 Vue.prototype.on() 方法在根组件中监听了 global-event 事件。当我们点击按钮时，我们会使用 Vue.prototype.emit() 方法触发 global-event 事件，并将 globalEventData 数据传递给事件处理函数。