vue组件

最新推荐文章于 2023-04-14 10:32:45 发布

Wooo0Ooo

最新推荐文章于 2023-04-14 10:32:45 发布

阅读量111

点赞数

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

本文链接：https://blog.csdn.net/Wooo0Ooo/article/details/119898492

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

关于组件

组件是可复用的vue实例,将重复使用的内容作为一个组件,后面利用组件即可

全局组件和局部组件都可以模板外置

全局组件:定义在vue实例外面

定义组件:定义组件中模板内容
注册组件第一个参数为组件标签名第二个参数为组件的名字
使用组件在div中使用组件组件可以重复使用

		<!-- 引入vue.js -->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 视图部分 -->
		<div id="app">
			<aa></aa>
			<aa></aa>
		</div>
	</body>
	<!-- 脚本部分 -->
	<script type="text/javascript">
		//定义全局组件
		var AA = Vue.extend({
			//定义模板
			template:"<h1>还有四天就放假了---全局组件</h1>"
		});
		//注册组件
		Vue.component('aa',AA);
		
		//创建vue对象
		new Vue({
			el:"#app",
			//数据
			data:{
				
			}
		})
	</script>

全局组件外置模板写法:

		<!-- 引入vue.js -->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 视图部分 -->
		<div id="app">
			<aa></aa>
		</div>
		<!-- 定义模板 -->
		<template id="aatemp">
			<div><!-- 有且只有一个父节点 div -->
				<h1>哈哈哈哈哈</h1>
				<h2>呵呵呵呵呵</h2>
			</div>
		</template>
	</body>
	<!-- 脚本部分 -->
	<script type="text/javascript">
		// 定义组件
		var AA = Vue.extend({
			//定义模板
			template:"#aatemp"
		});
		//注册组件
		Vue.component('aa',AA)

		//创建vue对象
		new Vue({
			el:"#app",
			//数据
			data:{
				
			}
		})

局部组件:定义在vue实例里面

		<!-- 引入vue.js -->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 视图部分 -->
		<div id="app">
			<aa></aa>
		</div>
		<!-- 定义外置模板 -->
		<template id="aatemp">
			<div>
				<h1 @click="run()">{{msg}}</h1>
				
			</div>
		</template>
	</body>
	<!-- 脚本部分 -->
	<script type="text/javascript">
		//创建vue对象
		new Vue({
			el:"#app",
			//数据
			data:{
				
			},
			//局部组件 采用键值对方式定义
			components:{
				//组件名(标签名)
				aa:{
					//组件的数据
					data(){
						return{//键值对方式定义
							msg:"局部组件中的数据data"
						}
					},
					//模板
					template:"#aatemp",
					//函数
					methods:{
						run:function(){
							this.msg = "值变了";
						}
					}
				}
			}
		})
	</script>

父组件中创建子组件父组件向子组件传递内容

父组件向子组件传递内容 通过props属性
1.定义各个组件的内容
2.在子组件中定义props属性 props属性默认数组形式带引号
3.在父组件中传递数据给子组件通过绑定属性的形式
4.在子组件中使用父组件的数据

	<body>
		<!-- 视图部分 -->
		<div id="app">
			<aa></aa>
		</div>
		<template id="aatemp">
			<!-- 有且只有一个父节点 -->
			<div>
				<h1>{{msg}}</h1>
				<h2>{{msg2}}</h2>
				<!-- 使用子组件 通过绑定属性的形式定义-->
				<bb :m="msg" :n="msg2"></bb><!-- 父向子传递数据 父变量不需要双花括号 -->
			</div>
		</template>
	</body>
	<!-- 脚本部分 -->
	<script type="text/javascript">
		//创建vue对象
		new Vue({
			el:"#app",
			//数据
			data:{
				
			},
			//定义组件
			components:{
				//组件名
				aa:{
					//定义数据
					data(){
						return{
							msg:"父组件的data",
							msg2:"父组件的data2"
						}
					},
					//定义模板
					template:"#aatemp",
					//定义组件
					components:{
						//组件名
						bb:{
							//定义props属性 固定写法 默认数组形式
							props:["m","n"],
							//定义数据
							data() {
								return{
									bmsg:"子组件的data"
								}
							},
							//定义模板
							template:"<h3>{{bmsg}}--{{m}}--{{n}}</h3>"
						}
					}
					
				}
			}
			
			
		})
	</script>

Wooo0Ooo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue组件

关于组件组件是可复用的vue实例,将重复使用的内容作为一个组件,后面利用组件即可全局组件和局部组件都可以模板外置全局组件:定义在vue实例外面定义组件:定义组件中模板内容注册组件第一个参数为组件标签名第二个参数为组件的名字使用组件在div中使用组件组件可以重复使用  <script src="js/vue.js" type="text/javascript" char...
复制链接

扫一扫