怎么使组件变得更加灵活

全局组件注册：

import 组件名 from "组件位置"
const app = createApp(App)
app.component(组件名,组件)
app.use(router).mount("#app")

vue3相对于vue2，在全局注册组件时不再是将组件挂载到Vue对象上，而是挂载到createApp生成的实例上，多个app实例相互之间不会受到影响。

函数式组件：

函数式组件可以在调用的时候将组件绑定到body元素下，避免组件的样式被其他地方所覆盖，从而可能导致组件展示错乱。

import {createApp} from "vue"
import a from "组件位置"
//函数式组件
function fn(options){
	//1、创建弹框组件实例
	const b = createApp('a',{
		//需要传递的属性
		title:options.title
	})
	//2、创建渲染节点
	const dom = document.createElement("div")
	document.body.appendChild(dom)
	//3、将实例挂载到页面节点上
	b.mount(dom)
}
//注册函数
function fnInstall(){
	app.provide("fn",fn)
}
export default fn 

当调用fn函数时，我们可以传入options参数，携带我们需要传入给组件的信息，来赋值给组件的props属性。

use方法就是vue提供给我们注册插件的，use方法会首先判断插件有没有被注册，如果没有则调用插件的install方法，如果插件不是对象，本身就是一个方法，那么就执行这个方法。所以我们可添加一个fnInstall方法，在use执行的时候将fn函数注册到全局中。如上所示，然后在main.js中引入fnInstall方法并注册执行，然后在其他组件中使用inject获取就可以了。

//main.js
import {fnInstall} from "位置"
app.use(fnInstall).user(router).mount("#app")

自定义指令：

一般使用自定义指令来完成一些特殊的需求或者是丰富组件的功能，在vue3中注册自定义指令也需要在app实例上进行，注册一个v-focus指令，使用以及在main.js中配置如下：

<div v-focus:['top']="200">
...
</div>

app.directive("focus",{
    //在自定义指令中也支持构子函数的调用
    mounted(el,bingding){
        //el为指令绑定的页面元素
        el.focus()
        //binding是指令的一些参数信息，同时如果在使用指令的时候传入参数，那么会被binding接收保存在value属性中
        el.style.[binding.arg] = binding.value + "px"
    }
})