vue中的组件是自定的标签,可以扩展的原生html元素,封装可复用的代码
note:
1、在标签命中不要使用大写,标签名字必须用短横线隔开
2、模板中只能有一个根元素,不能使用并列标签。
定义组件
- 全局定义,在所有实例中都可以使用这个组件
<template id='hello'>
<div>
<div>hello</div>
<div>world</div>
</div>
</template>
let data={msg:'world'}
Vue.component('myComponent',{
template:'#hello',//通过模板的ID来引用这个组件
return {msg:'world'};//此时不能return data;这样会导致如果有多个实例运用这个组件会导致,三者共享同一个data,改变其中一个,会导致其他的都改变。对象变量会导致共享数据。
})
此时就可以在实例中使用my-component标签。
- 局部定义
let vm=new Vue({
el:'#app',
data:{msg:'hello'},
components:{
'my-component'(myComponent):{
template:'<h1>{{msg}}</h1>',
data(){
return {msg:'world'};
}
}
}
})
1、子组件不能直接使用父组件的数据
2、子组件可以声明自己的数据
组件之间的数据传递
1、每个组件是没关系的,都应该产生自己的数据。在组件中data使用的方法和默认的vm一样。只是data不再是对象而是函数。组件可以无限嵌套。
2、声明组件的名字,不能为已经存在的标签
3、组件的嵌套,子组件必须写在父组建的模板中才能使用
- 1、父级向子级传递数据(传递的属性值)
父级向子级传递数据时主要用过prop和$refs两个属性来实现。
prop的实现
1、如果直接写a='b'格式传递的是字符串,动态数据获取用的是v-bind,一般无论是动态还是静态,我们都会采用:。
2、:msg='meat',meat是变量;msg='meat',meat是字符串,:msg="'meat'",meat是字符串
3、子级不能直接改变父级的数据,如果要修改可以将父级的数据修改后赋值给子级的变量,可以使用data或者computed
<div id=app>
<child :data='aaa' :data1="bbb"></child>
//此处,在子组件中左边的是子组件的接收,用props接收,如果是放在数组中每一项就是一个字符串,右边是从父级传递的数据。
</div>
<script>
let vm=new Vue({
el:'#app',
data:{
aaa:'xxxxx',
bbb:'yyyyy'
}
components:{//
child:{
props:['data','data1'],
template:'<div>{{msg}}</div>',
data(){
return {msg:this.data+'zxvv'}
},
computed:{
msg:{
get(){
return this.data+'zxvv'
}
}
}
}
}
})
</script>
props
中的validate
:
1、props:['xx','yy','zz'];
2、props:{
aa:{
type:[Number,String],//选择值得类型符不符合要求
default:'acac',//默认值
validator(val){//校验函数
return val>200//返回false,校验失败。
}
required:true,//代表属性必须填
}
}
$refs的实现:
主要是在父组件中添加ref="child"属性、直接使用this.$refs.child.变量来改变子组件中的值。
$refs和prop的主要区别:我的理解是
prop:更着重于父组件给子组件的数据传输、更加灵活和方便,但是弊端是:子组件太依赖于父组件。
$refs:更着重于索引定位到子组件。不是很灵活,但优势是可以和父组件完全的解耦,父组件只要在制定的方法中去操作子组件即可。
- 2、子级向父级传递数据(借助于事件)
1、子级$emit后会触发自己身上的某一个自定的方法,这个方法对应的函数在父级的身上。
<div id="app1">
{{datas}}
<child @get-data="getData"></child>//自定义方法写在自己身上,右边的是父级对应方法的函数
</div>
let vm1 = new Vue({
el: '#app1',
data: {
datas: '',//用来接收自己传递的空数据
},
methods: {
getData(msg){//接受的参数就是从子级传递过来的数据
this.datas = msg;
}
},
components: {
child: {
template: `<div><button @click="say">{{msg}}</button></div>`,//绑定触发事件
methods: {
say(){//触发事件,以及自定义方法
this.$emit('get-data', this.msg);//这里的this指的是当前子组件
}
},
data(){
return {
msg: 'xxx'
}
}
}
}
})