Vue JS中如何创建基组件让其他组件继承blur功能无需重复导入

这个需求完全可以实现，不需要在每个组件内单独编写导入、注册Blur组件的代码，常用实现方案有以下几种：

方案1：全局注册组件（全项目通用，最推荐） #

直接在项目入口文件中全局注册Blur组件，注册后所有组件的模板内可以直接使用<blur>标签，不需要额外导入或注册。
示例代码（Vue3为例）：

// main.js / main.ts
import { createApp } from 'vue'
import App from './App.vue'
// 导入Blur组件
import Blur from "./shared/Blur.vue";

const app = createApp(App)
// 全局注册，第一个参数是组件使用时的标签名
app.component('Blur', Blur)

app.mount('#app')

注册完成后，你原来的component1.vue可以简化成以下代码，完全删掉导入和注册逻辑即可正常运行：

<template>
<blur :isData="isData">
    <!-- logic/implementation of component 1 -->
    <div>
    </div>
</blur>
</template>

<script>
export default {
  name: "component-1",
  // 不需要再写import和components注册Blur的代码
}
</script>

如果是Vue2项目，注册逻辑写法如下：

// main.js
import Vue from 'vue'
import App from './App.vue'
import Blur from "./shared/Blur.vue";

Vue.component('Blur', Blur)

new Vue({
  render: h => h(App)
}).$mount('#app')

方案2：局部范围注册（仅指定文件夹下的组件可用） #

如果你不希望全局注册污染全项目的组件命名空间，只需要某个指定文件夹下的组件可以使用Blur，可以用自动导入插件配置规则，仅对目标文件夹下的组件自动注入Blur组件的导入注册逻辑。
你提到的基类方案也可以实现：定义一个基础组件，在基础组件内完成Blur的注册，后续对应文件夹下的所有业务组件都继承该基础组件即可，但这种方式会增加组件的继承层级复杂度，不如自动导入或者全局注册易用，一般不推荐使用。

补充说明：你给出的示例代码中template的结束标签写反了，把最后的<template>改成</template>即可正常运行。

内容的提问来源于stack exchange，提问作者Abdullah Ch