当前位置：首页 > news >正文

Vue3中组件的挂载及调用

news 来源：原创 2024/5/7 0:57:22

在Vue2.X中，我们通过Vue.prototype.$dialog = dialog的方式挂载组件，
并使用this.＄xxx的形式通过函数调用组件，如this.＄dialog({})

而在Vue3.X中，组合式API没有this，不过新增了globalProperties属性，代替了Vue.prototype

查看Vue3.X官方文档（https://www.vue3js.cn/docs/zh/api/application-config.html#globalproperties）

// 之前(Vue 2.x)
Vue.prototype.$http = () => {}

// 之后(Vue 3.x)
const app = Vue.createApp({})
app.config.globalProperties.$http = () => {}

下面我们通过一个示例看看Vue3中如何实现组件的挂载及调用：

此处，我们在myDialog上增加install属性，并进行全局注册与挂载，再将其暴露出去

// dialog.js
myDialog.install = app => {
	// 全局注册
	app.component('myDialog', dialogConstructor)
	// 两种全局挂载方法
	app.config.globalProperties.$dialog = myDialog
	// app.provide('myDialog', myDialog)
}

export default myDialog

全局引入

在main.js中，我们将其导入，并通过app.use（），系统会自动调用其install方法

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import myDialog from './packages/dialog/index.js'
const app = createApp(App)
// 此处注意app.mount需要放置最后，否则app.use无法执行
app.use(myDialog)
app.mount('#app')

在需要调用的vue文件中，我们通过 getCurrentInstance 获取ctx，getCurrentInstance 能帮助我们获取实例上下文，此处相当于Vue2.X中的this

// 需要调用组件的vue文件
import { getCurrentInstance } from 'vue'
setup() {
	const {ctx } = getCurrentInstance();
	ctx.$dialog({
		id:'my-dialog',
		title: "提示",
		content: "恭喜获得XXX代金券"
	})
	......
}

注意：ctx用于生产模式进行调试，打包后可能出现问题，此处建议改为proxy，即

// 需要调用组件的vue文件
import { getCurrentInstance } from 'vue'
setup() {
	const {proxy } = getCurrentInstance();
	proxy.$dialog({
		id:'my-dialog',
		title: "提示",
		content: "恭喜获得XXX代金券"
	})
	......
}

此外，我们还可以使用第二种方式 Provide / Inject
点击查看（https://www.vue3js.cn/docs/zh/api/application-api.html#provide）

import { inject } from 'vue';
setup() {
	const myDialog = inject('myDialog')
	myDialog({
		id:'my-dialog',
		title: "提示",
		content: "恭喜获得XXX代金券"
	})
}

局部引入

若只想在局部组件中调用，我们也可以使用标签或函数两种调用模式，据实际需求使用

标签调用：

<Dialog title="hello" @click="test" :visible="true" @ok-btn-click="test" :closeOnClickModal="false" content="Trist"></Dialog>

<script>
import Dialog from './packages/dialog/index.js'
export default {
	components: {
		Dialog 
	}
}
</script>

//或者	setup语法糖可省略大量代码
<script setup>
import Dialog from './packages/dialog/index.js'
</script>

函数调用：

import Dialog from './packages/dialog/index.js'
export default {
	setup() {
		Dialog({
			id:'my-dialog',
			title: "提示",
			content: "恭喜获得XXX代金券"
		})
	}
}
</script>

//或者	setup语法糖可省略大量代码
<script setup>
import Dialog from './packages/dialog/index.js'
Dialog({
	id:'my-dialog',
	title: "提示",
	content: "恭喜获得XXX代金券"
})
</script>