15.Vue组件深入了解

注册组件

全局注册

通过实例的 component 属性直接注册的组件

const vueApp = Vue.createApp({})
vueApp.component('component-a', {
	template: `
		<p>这是全局注册的A组件</p>
	`
})
vueApp.component('component-b', {
	template: `
		<p>这是全局注册的B组件</p>
	`
})
vueApp.mount('#app')

全局注册往往是不够理想的。全局注册所有的组件意味着即便你已经不再使用其中一个组件了，它仍然会被包含在最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

局部注册

const app = {
	components: {
		'component-a': {
			template: `
				<div>这是模板A</div>
			`
		},
		'component-b': {
			template: `
				<div>这是模板B</div>
			`
		}
	}
}
Vue.createApp(app).mount('#app')

注意

• 模板在起名字的时候，如果在 js 中起名是 comA 这样的小驼峰命名 的话，在 html 中使用标签的时候，就需要使用 - 分割的命名，也就是 com-a 这个标签。
• 如果直接使用 - 分割的话，那么使用时是完全一致的。

传递参数 props

写在前边：
在传递参数的时候，在 js 中定义的参数名在 html 中使用的时候会被解析。

因为在 html 中，所有的标签和属性解析出来，都会是小写。

如果在 js 中定义的属性名是 myProp 的话， 在 html 中对应的就会是 my-prop。

换言之，在 html 中的属性使用的是 my-prop 属性传递，在 js 中也只能匹配 myProp 名称的参数。

可以使用 _ 下划线对单词进行分割，这样在 js 和 html 中使用时，参数可以保持一致，不会转换

<div id="app">
	<my-component 
		my_title="my_title" 
		my-title="myTitle"
	>
	</my-component>
</div>

const app = {
	components: {
		'my-component': {
			props: ['my_title', 'myTitle'],
			template: `
				<div>my_title:{{my_title}}</div>
				<div>myTitle:{{myTitle}}</div>
			`
		},
	}
}
Vue.createApp(app).mount('#app')

在传递参数时，不仅可以使用数组传递参数，还可以使用对象传递参数，并规定参数的类型，而且还可以对参数进行一个校验。

<div id="app">
	<my-component 
		num='10'
		str='字符串'
		bool=true,
	>
	</my-component>
</div>

const app = {
	components: {
		'my-component': {
			props: {
				num: {
					type: Number,
					required: true,
				},
				str: String,
				bool: Boolean,
			},
			template: `
				<p>num：{{num}}</p>
				<p>str：{{str}}</p>
				<p>bool：{{bool}}</p>
			`
		},
	}
}
Vue.createApp(app).mount('#app')

详情请参考官网：Vue的Prop属性