Vue 3 - 07 组件

Vue3 组件

组件可以扩展HTML元素,封装可重用的代码,每个Vue应用都是通过用createApp函数创建的,传递给createApp的选项用于配置根组件。当挂载应用时,该组件被用作渲染的起点。

全局注册Vue组件实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>组件</title>
	<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
	<div id="app">
		<component></component>
	</div>
</body>
<script>
	const app = Vue.createApp({})
	app.component('component', {
		template: "<h1>A component.</h1>"
	})
	app.mount("#app");
</script>

局部组件

全局注册不能实现按需加载的作用,反而会增加网络开销,页面渲染变慢,所以全局注册组件并不是必须的。

# Js定义局部组件A、B、C:
const ComponentA = {}
const ComponentB = {}
const ComponentC = {}

# 调用使用
const app = Vue.createApp({
	components: { 
		'component-a': ComponentA,
		'component-b': ComponentB
	}
})

Prop属性

prop 是子组件接受父组件传递过来的数据的属性,父组件的数据需要通过props把数据传给子组件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
	<div id="app">
		<site title="Google"></site>
		<site title="Baidu"></site>
		<site title="SoSo"></site>
	</div>
</body>
<script>
	const app = Vue.createApp({})

	app.component('site', {
		props: ['title'],
		template: `<h4>{{ title}}</h4>`
	})
	app.mount("#app");


</script>
凡所有相,皆是虚妄。

推荐阅读