vue component组件

对组件注册
//全局组件
				var Aaa=Vue.extend({
					template:'<h3>我是新内容</h3>'
				});
				//component组件
				//aaa是标签名 Aaa是我们定义的组件内容
				Vue.component('aaa',Aaa)
<div id="box">
				<aaa>aaa</aaa>		
		</div>
运行后,<aaa>标签里的内容变成我们定义的<h3>内容

组件里放数据

<script>
			window.onload = function(){
				
				var Aaa=Vue.extend({
					//组件里面放数据
					//data必须是函数的形式,函数必须返回一个对象(json)
					data(){
						return{
							msg:'我是新的'
						};
					},
					template:'<h3>{{msg}}</h3>'
				});
				//component组件
				//aaa是标签名 Aaa是我们定义的组件内容
				Vue.component('aaa',Aaa)
				
				var vm=new Vue({
					el:'#box',
					data:{
						bSign:true
					}
				})
			}
		</script>
	</head>
	<body>
		<div id="box">
				<aaa>aaa</aaa>		
		</div>

组件中可直接放点击事件

<script>
			window.onload = function(){
				
				var Aaa=Vue.extend({
					//组件里面放数据
					//data必须是函数的形式,函数必须返回一个对象(json)
					data(){
						return{
							msg:'我是新的'
						};
					},
					methods:{
						change(){
							this.msg = '点击变'
						}
					},
					template:'<h3 @click="change">{{msg}}</h3>'
				});
				//component组件
				//aaa是标签名 Aaa是我们定义的组件内容
				Vue.component('aaa',Aaa)
				
				var vm=new Vue({
					el:'#box',
					data:{
						bSign:true
					}
				})
			}
		</script>
	</head>
	<body>
		<div id="box">
				<aaa>aaa</aaa>		
		</div>

局部组件

<div id="box">
			<aaa></aaa>
		</div>
		
		<script>
			var Aaa=Vue.extend({
				template:'<h3>你好</h3>'
			})
			
			var vm=new Vue({
				el:'#box',
				data:{
					
				},
				components:{
					//局部组件
					//aaa加引号,是为了应对如my-aaa类的标签
					'aaa':Aaa
				}
			})
		</script>

局部组件的另一种写法

<div id="box">
			<my-aaa></my-aaa>
		</div>
		
		<script>
			var vm=new Vue({
				el:'#box',
				data:{
					
				},
				components:{
					'my-aaa':{
						template:'新内容'
					}
				}
			})
		</script>

评论

大侠名号:   验证码: 点击我更换图片  

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND