vue3全局组件的注册

vue3全局组件注册

①主文件：例—>main.js

import { createApp} from 'vue'
import App from './App.vue'
import Aaa from '../src/view/common.vue'   //引入这个组件
createApp(App)
    .component('Common', common)   //通过component("组件命名",该组件)
    .mount('#app')

②要注册的组件: 例–> common.vue

<template>
	  <div>
      	<p>{{name}}</p>
      	<p>{{title}}</p>
 	 </div>
</template>
<script>
	export default {
    	props:{   //给组件要传递的参数
        	name: String,
       	 	title: String
    	},
    	setup(props){
        	const name = props.name;
        	const title= props.title;
        	return{name,title}
    	}
	}
</script>

③使用这全局组件:

<Common name="全局" title="组件" />

④通过component方法的好处：

优点：
1.不需要用template以字符串的形式来编写模板
2.对复杂和需要传入一定的参数的组件比较友好