组件注册 —— Vue 学习笔记（九）

容景

于 2020-11-16 09:30:29 发布

阅读量122

点赞数 3

分类专栏： Vue 学习笔记文章标签： vue

本文链接：https://blog.csdn.net/ySFRaabbcc/article/details/109713371

版权

Vue 学习笔记专栏收录该内容

12 篇文章 1 订阅

订阅专栏

组件是可复用的 Vue 实例，我们可以在一个通过 new Vue 创建的根实例当中，使用根实例创建之前注册的组件。

因为组件是 Vue 实例，所以它们与 new Vue 接受相同的选项，例如：data、computed、watch、methods 以及生命周期钩子等，仅有的例外是像 el 这样根实例特有的选项。

全局注册组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全局注册组件</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<count-button></count-button>
		</div>
		<script>
			Vue.component('count-button', {
				data: function() {
					return {
						count: 0
					}
				},
				template: "<button v-on:click='count++'>click me : {{ count }}</button>"
			})
			let vm = new Vue({
				el: '#app',
			})
		</script>
	</body>
</html>

Vue.component() 用于注册或获取全局组件，'count-button' 就是组件的名字，它是 Vue.component() 方法的第一个参数，我们在 html 中把它当作标签来引用就可以。

由于组件也是 Vue 实例，所以它也可以有 data 等（一个组件的 data 选项必须是一个函数，可以维护一份被返回对象的独立拷贝），template 就是这个组件在 dom 中渲染的形式：

template: "<button v-on:click='count++'>click me : {{ count }}</button>"

组件可以复用：

不同的组件可以在各自内部互相使用：

效果：

使用子组件：

效果：

局部注册组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全局注册组件</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<component-a></component-a>
			<component-b></component-b>
		</div>
		<script>
			let componentA = {
				template: '<h3>I am title A</h3>'
			};
			let componentB = {
				template: '<h3>I am title B</h3>'
			}
			let vm = new Vue({
				el: '#app',
				components: {
					'component-a': componentA,
					'component-b': componentB
				}
			})
		</script>
	</body>
</html>

效果：

我们通过 JavaScript 对象定义组件后，在 Vue 实例的 components 选项中定义要使用的组件。

在 components 中，property 名就是自定义元素的名字，property 值就是这个组件的选项对象。

局部注册的组件在其子组件中不可用，如果想要使用其他局部注册组件，可以：

效果：

在全局注册组件中使用局部注册组件：

效果：

在局部注册组件中使用全局注册组件：

效果：

组件是一个特殊的 Vue 实例！

组件的模板语法

效果：

这里我们使用了模板字符串去将模板内容包含在一个父元素内，等价于：

容景

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
组件注册 —— Vue 学习笔记（九）

组件是可复用的 Vue 实例，我们可以在一个通过 new Vue 创建的根实例当中，使用根实例创建之前注册的组件。因为组件是 Vue 实例，所以它们与 new Vue 接受相同的选项，例如：data、computed、watch、methods 以及生命周期钩子等，仅有的例外是像 el 这样根实例特有的选项。全局注册组件<!DOCTYPE html><html> <head> <meta charset="utf-8"> <
复制链接

扫一扫