- 父传子
//父组件
<Child :message="toZi"></Child>
import Child from './zi';
export default {
name: "fu",
data(){
return{
toZi: '父传给子的数据'
}
},
components:{
Child
}
}
//子组件
<p>这个数据是：<span>{{message}}</span></p>
props:{
message:{
type: String,
required: true
}
},
延伸
props
1、props:["message"]
2、
props:{
message:{
type: String,
required: true
}
},
//这样设置当父组件传来的不是String类型时，会有警告出现，如果我传来的是数组，那么会出现，vue.esm.js?efeb:591 [Vue warn]: Invalid prop: type check failed for prop "message". Expected String, got Array.
props能验证的数据类型：
1、String
2、Number
3、Boolean
4、Object
5、Array
6、Function
可以通过下面的例子详细看一下
props: {
// 必须是数字类型
message_number: Number,
// 必须是数字或者字符串
message_string_number: [String, Number],
// 必须是布尔值，如果没有定义，默认值就是true
message_boolean: {
type: Boolean,
default: true
},
// 必须是数字，而且必须传
message_must: {
type: Number,
required: true
},
// 如果时数字或者对象，默认值必须时一个函数来返回
// 这个里面父组件里面设置toZi: undefined
message_arr: {
type: Array,//这个type要和下面的return里面的数据类型相对应的就可以
default() {
return [1, 2]
}
},
//这个时候会显示默认的【1，2】
// 自定义一个验证函数
message_function: {
validator(value) {
return value > 20
//如果小于20控制台会有警告信息 vue.esm.js?efeb:591 [Vue warn]: Invalid prop: custom validator check failed for prop "message".
}
}
}
有一个场景
父组件传值，子组件保存把它当作当前页面的初始值，然后后续使用
父组件
<input type="text" v-model="toZi">
<Child :message="toZi"></Child>
<p>这个数据是父组件传过来的：<span>{{message}}</span></p>
<p>{{sub_message}}</p>
<p><input type="text" v-model="sub_message"></p>
data(){
return{
sub_message: this.message
}
}
这个时候的操作效果就是
效果图.png
在子组件自己内部保存的值，后续父组件再次变化，子组件也不会变
第二种方法利用$refs
//父组件
<Child ref="child"></Child>
<button @click="toZi">父组件</button>
toZi(){
this.$refs.child.toZi('123')
}
//子组件
toZi(message){
this.zi = message
}
this.$refs.child可以看到子组件里面的各个方法，属性值
- 子传父
//父组件
<Child @toFu = exports></Child>
<p>{{this.message}}</p>
methods:{
exports(m){
console.log('--');
console.log(m);
this.message = m;
}
}
mounted() {
this.$emit('toFu',{
message: '这是子数据'
})
}
这种情况是页面一加载，子组件就把数据传递给父组件了
还有的就是，比如说数据变换的时候传递给父组件，这个时候可以用watch，，如果是input还可以在上面绑定事件，在事件里emit
fu组件
<Child @toFu = exports @toFu1 = exports1 @toFu2 = exports2></Child>
<p>{{this.mess1}}</p>
<p>{{this.mess2}}</p>
<p>{{this.mess3}}</p>
methods:{
exports(m){
this.mess1 = m;
},
exports1(m){
this.mess2 = m;
},
exports2(m){
this.mess3 = m;
}
}
zi组件
<input type="text" v-model="m1">
<input type="text" v-model="m2" @change="emits">
data(){
return{
// sub_message: this.message,
m1: '这是子数据2',
m2: '这是子数据3'
}
},
watch:{
'm1':function(){
this.$emit('toFu1',{
message: this.m1
})
}
},
mounted() {
this.$emit('toFu',{
message: '这是子数据1'
})
this.$emit('toFu1',{
message: this.m1
})
this.$emit('toFu2',{
message: this.m2
})
},
methods:{
emits(){
this.$emit('toFu2',{
message: this.m2
})
}
}
WX20190927-163844@2x.png
- 组件之间
evenBus
在common文件夹下新建bus.js
import Vue from 'vue';
export default new Vue();
组件a
Bus.$emit('toB','123')
组件b
Bus.$on('toB',message=>{
console.log(message);
this.messB = message;
})
遇到的问题
控制台报出vue warn
Do not use built-in or reserved HTML elements as component id: XXX
这说明xxx是关键字
关键字如下
区分大小写
'html,body,base,head,link,meta,style,title,address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,div,dd,dl,dt,figcaption,figure,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,menuitem,summary,content,element,shadow,template'
不区分大小写
'svg,animate,circle,clippath,cursor,defs,desc,ellipse,filter,font,font-face,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,'polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view,true
知识点
$ref除了可以在父传子中应用，还可以有其他用处,比如修改dom元素
<p ref="pRef">相关信息</p>
console.log(this.$refs.pRef);//能获取p这个dom元素和上面的相关信息也可以利用这个修改dom
this.$refs.pRef.style.color = 'red';// 修改html样式
注：ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。
