Vue之组件初识(021)

最新推荐文章于 2023-03-25 20:42:34 发布

从小白小菜开始

最新推荐文章于 2023-03-25 20:42:34 发布

阅读量148

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_31707323/article/details/115876818

版权

Vue 专栏收录该内容

46 篇文章 2 订阅

订阅专栏

Vue之组件初识

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。几乎任意类型的应用界面都可以抽象为一个组件树：
在这里插入图片描述
二. 注册组件
.全局注册

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../js/vue.js"></script>
		<title>component</title>
	</head>
	<body>
		<!--调用-->
		<div id="app">
			<button-counter></button-counter>
		</div>
		<div id="app02">
			<button-counter></button-counter>
		</div>
		
		<script>
			// 定义一个名为 button-counter 的新组件
			Vue.component('button-counter', {
				data: function() {
					return {
						count: 0
					}
				},
				template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
			})
			// 创建根实例
			new Vue({
				el: '#app'
			})
			new Vue({
				el: '#app02'
			})
		</script>
	</body>
</html>

效果如图：
在这里插入图片描述

总结：
1.因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
2.data 必须是一个函数。

局部注册
完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../js/vue.js"></script>
		<title>component02</title>
	</head>
	<body>
		<!--调用-->
		<div id="app">
			<button-counter></button-counter>
		</div>
		<script>
				// 创建根实例
			new Vue({
				el: '#app',
				// 在实例里定义一个名为 button-counter 的新组件
				components:{
					'button-counter':{
						data: function() {
							return {
								count: 0
							}
						},
						template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
					}
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述

这样组件只能在这个实例中使用

从小白小菜开始

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
Vue之组件初识(021)

Vue之组件初识组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。几乎任意类型的应用界面都可以抽象为一个组件树：二. 注册组件.全局注册<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="../js/vue.js"></script> <title>compone
复制链接

扫一扫