Vue组件基础

最新推荐文章于 2024-09-06 14:35:24 发布

FuTzy

最新推荐文章于 2024-09-06 14:35:24 发布

阅读量154

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_41609957/article/details/103881085

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

	<body>
		<!-- 父组件 -->
		<div id="app">
			<button-counter></button-counter>
		</div>
	</body>
<script>
		//子组件
		Vue.component('button-counter', {
				// 组件的数据,data必须是函数
				data: function() {
					return {
						count: 0
					}
				},
				// 组件的模板内容
				template:'<button @click="handle">点击了{{count}}</button>',
				// 存放函数
				methods:{
					handle:function(){
						this.count++;
					}
				}
			})
		// 父组件
		var vm= new Vue({
			el: "#app",
			//data是对象
			data: {
				msg: 'Hello World!'
			}
		});
	</script>

子组件data必须是函数
组件的模板内容必须只有一个根元素，模板需要有一个根节点
组件的模板内容可以用模板字符串``

如

// 组件的模板内容
				template:`
				<div>
				<button @click="handle">点击了{{count}}</button>
				</div>
				`,

驼峰式命名的组件只能在字符串模板中使用( template ) ,想要在普通标签中使用必须转化成短横线方式

例如 <HelloWorld></HelloWorld> --> <hello-world></hello-world>

局部组件的注册

var 组件的内容 ={

data:function(){

},

template:...

}



new Vue({

el:'#app',

components:{

'组件的名称':组件的内容

}

})

局部组件只能在组测它的父组件里使用

父组件向子组件传值

<body>
		<div id="app">
			<item-list :title="ptitle" pother="静态数据绑定"></item-list>
		</div>
	</body>
	<script>
		Vue.component('item-list',{
			props:['title','pother'],
			data:function(){
				return{
					msg:'子组件中的数据'
				}
			},
			template:'<div>{{msg}}---{{title}}---{{pother}}</div>',
		})
		
		var vm= new Vue({
			el:'#app',
			data:{
				ptitle:'动态绑定父组件中的数据'
			}
		});
	</script>

Props属性名规则

在props中使用驼峰形式，模板中需要使用短横线的形式例如 HelloWorld---hello-world
字符串模板中没有该限制 (template中)

Props属性值类型

想要用props向子组件传递其他类型的值的时候可以绑定v-bind来传值

<temp-list pnum='123' :pcount='123' ></temp-list>

Vue.component('temp-list',{

props:['pnum','pcount']

//pnum里的值为123，类型是string,pcount里的值为123，类型为number,bool类型同理

});

传递值为数组和对象的情况如下

<body>
		<div id="app">
			<item-list :title="ptitle" :pnum="123" :pobj="pobj" :parr="parr" pother="静态数据绑定"></item-list>
		</div>
	</body>
	<script>
		Vue.component('item-list',{
			props:['title','pother','pnum','parr','pobj'],
			data:function(){
				return{
					msg:'子组件中的数据'
				}
			},
			template:`<div>
			<div>{{msg}}---{{title}}---{{pother}}</div>
			<div>{{typeof pnum}}</div>
			<ul>
				<li :key="index" v-for="(item,index) in parr">{{index}}:{{item }}</li>
			</ul>
			<div>
			<span>{{pobj.name}}:{{pobj.age}}</span>
			</div>
			</div>
			`,
		})
		
		var vm= new Vue({
			el:'#app',
			data:{
				ptitle:'动态绑定父组件中的数据',
				parr:['apple','orange','banana'],
				pobj:{
					name:'xiaoz',
					age:18
				}
			}
		});
	</script>

对象和数组都需要在父组件的data中定义一下值，动态绑定的字符串类型也需要，这么看父组件好像是赋值用的?

子组件向父组件传值等..

待续...