✨在生成、导出、导入、使用 Vue 组件的时候，像我这种新手就会常常被位于不同文件的
new Vue()
、
export default{}
搞得晕头转向。本文对常见用法汇总区分

new Vue()

💦
Vue()
就是一个构造函数，
new Vue()
是创建一个 vue 实例。该实例是一个对象，可以包含数据data、模板template、挂载元素components、方法methods、computed、watch、生命周期钩子等选项。

渲染的时候，可以使用构造 Vue 实例的方式来渲染相应的 html 页面。

📅

main.js：

import Vue from 'vue' 
import App from './App.vue'
import router from './router'

new Vue({
    el: '#app',
    router,
	components: { App },
	template: '<App/>'
})

export default{}

💦
export default
作用只是用于导出模块，在别的模块需要调用这个模块的时候，可以通过
import
命令引入使用的。

假设我们写了一个单页面组件 A 文件，而在另一个文件 B 里面需要用到它。

在文件 A 中定义输出接口 export **，在文件 B 中引入 import，然后再 new Vue () 生成一个 Vue 实例，把引入的组件用起来，这样就可以复用组件 A 去配合文件 B 生成 html 页面了。

📅

App.vue：

<template>
   <div id="app">
      <router-view />
   </div>
</template>

<script>
export default {
  name: "App"
};
</script>

App.vue 通过
export default{}
对外暴露
name: "App"
main.js 通过
import App from './App.vue'
导入
App
组件
new Vue()
创建 Vue 实例，再通过
components: { App }
将组件添加到 Vue 实例
最后通过
template: '<App/>'
生成 html 页面。

createApp()

💦Vue3.x版本，创建实例的方法变成
createApp()

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
 
createApp(App).use(router).mount('#app')

Vue.component

💦作用：全局注册组件

Vue.component(‘组件名’，组件对象)

import Vue from 'vue' 
import App from './App.vue'
import PageTools from '@/components/PageTools' // 导入需要注册的组件

Vue.component('PageTools', PageTools) // 全局注册组件

new Vue({
    el: '#app',
	components: { App },
	template: ' <div>
	               <App/>
				   <PageTools></PageTools>
				</div>'
})

📌全局组件可以在其注册后创建的所有 vue 实例中使用，

⚠️注意⚠️：

全局注册要写在创建Vue实例对象前。

<div id="app">	<!-- 在第一个vue实例中调用全局组件 -->
    <my-component></my-component><!-- 以标签形式使用组件 -->
</div>
<div id="app1">	<!-- 在第二个vue实例中调用全局组件 -->
    <my-component></my-component><!-- 以标签形式使用组件 -->
</div>
<script>
    // 定义一个名为 my-component 的新组件
    Vue.component('my-component', {
        //组件内容写这里
        template: "<div>这是一个全局组件</div>",
    })
    //声明一个vue实例
    var vueApp = new Vue({
        el: '#app',
    });
    var vueApp = new Vue({
        el: '#app1',
    });
</script>

Vue3注册全局组件

📅

GlobalComponent.vue：

<template>
  <button @click="count++">点了 {{ count }} 次！</button>
</template>

<script>
export default {
  name: "GlobalComponent",
  data() {
    return {
      count: 0,
    };
  },
};
</script>

📅

main.js：

import {createApp} from 'vue'
import App from './App.vue'
import GlobalComponent from "./components/GlobalComponent"

const app = createApp(App)

app.component('GlobalComponent',GlobalComponent);

app.mount('#app')

📌
app.component('GlobalComponent',GlobalComponent);
将 GlobalComponent 组件引入并注册为全局组件。

📅

App.vue：

<template>
  <h1>Hello element-plus!</h1>
  <GlobalComponent></GlobalComponent>
  <br />
  <about></about>
</template>

<script>
import About from "./components/About.vue";
export default {
  name: "App",
  components: {
    About,
  },
};
</script>

在这里插入图片描述

📌在根组件直接使用全局组件。而且全局组件和局部组件的颜色有区别。

📅

About.vue：

<template>
  <h2>this is About！ </h2>
  <br/>
  <GlobalComponent></GlobalComponent>
</template>

在这里插入图片描述

📌在其他组件直接使用全局组件。

在这里插入图片描述

Vue.use()

💦作用：注册全局组件、Vue的原型加一些东西。

📖官方解释用法：

安装 Vue.js 插件

。如果插件是一个对象，必须提供
install
方法。如果插件是一个函数，它会被作为
install
方法。install 方法调用时，会

将 Vue 作为参数传入

。

📌常用use()方法：

Vue.use(VueRouter)
Vue.use(Vuex)
Vue.use(vant)
Vue.use(ElementUI)

通过
Vue.use(vueRouter)
将
$router
和
$route
挂载到 Vue 原型上，全局都可以使用。

📚

Vue.use( ) 的核心原理

自定义插件：

💦自定义插件对象需要提供一个
install
函数，在
Vue.use(obj)
时，会自动调用该 install 函数，并传入 Vue 构造器。

const MyPlugin = {
	install(Vue) {
		console.log('install.....', Vue) 
		// 1、可以在Vue原型中加一些东西
		Vue.prototype.$num = 123
		// 2、全局注册组件
   		Vue.component('PageTools', PageTools)
  }
}

Vue.use(MyPlugin)

像VueRouter、Vuex、elementUI 这些插件都是内部进行封装了的，所以直接可以 use 进行全局注册。

☝️上述例子使用use注册组件貌似更加麻烦了，但如果项目需要全局注册几十个组件时，就可以把需要注册的几十个组件进行封装成对象，然后使用 use

//这里是use全局入口文件
import PageTools from './PageTools'  // 导入PageTools组件
import NavBar from './NavBar'        // 导入NavBar 组件
export default {
  install(Vue) {
    Vue.component('PageTools', PageTools) // 注册组件
    Vue.component('NavBar ', NavBar)      // 注册组件
  }
}

import Components from './components' // 导入全局入口文件
Vue.use(Components) // 注册全局入口文件里的全部组件

Vue.prototype

💦
vue.prototype
是一种注册全局变量的方式，使用 vue.prototype 的变量可以全局访问。最典型的例子就是
axios
。

import axios from 'axios';
Vue.prototype.$http = axios;

📌组件内调用
this.$http
进行访问。

this.$http({
  method: 'get',
  url: 'api'
}).then((response) =>{  
  console.log(response) 
}).catch((error) =>{
  console.log(error)    
})

使用 Vue.prototype 注册的全局变量前面都要加上
$
符号，这是一种规范，主要是为了

防止命名冲突

。

注意项

💦每个组件都是一个 vue 实例，Vue.prototype 注册的全局变量，只是给每个组件加了一个属性，这个属性的值并不具有全局性。

📅

main.js：

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false
Vue.prototype.$appName = 'main'

new Vue({
    el: '#app',
    components: { App },
    template: '<App/>',
})

📌给所有组件注册了一个属性
$appName
，赋予初始值
main
，所有组件都可以用
this.$appName
访问此变量，如果组件中没有赋值，初始值都是
main
。

📅

home.vue：

<template>
  <div>
    <div @click="changeName">change name</div>
    <div @click="gotoTest2">goto test2</div>
  </div>
</template>

<script>
export default {
  methods:{
    changeName(){
      this.$appName = "test1"
    },
    gotoTest2(){
      this.$router.push('/about')
    } 
  }
}
</script>

📅

about.vue

<template>
  <div>
    <div>{{this.$appName}} in test2</div>
  </div>
</template>

📌点击 home 中的 change name 再跳转 about，about 里面还是显示
main in test2
。

如果要实现全局变量的功能，需要把属性变为引用类型

Vue.prototype.$appName = { name: 'main' }

📌组件使用
this.$appName.name
访问改变引用相应的值，最终结果
test1 in test2
。

原文链接：https://blog.csdn.net/weixin_40017062/article/details/131996960

new Vue()

export default{}

createApp()

Vue.component

Vue3注册全局组件

Vue.use()

自定义插件：

Vue.prototype

注意项

你可能也喜欢