1.在父组件中,通过import载入子组件
如:import ComA from './components/a'
2.在a.vue中,设置导出模板:
export default{
}
3.在当前父组件中注册子组件:
import ComA from './components/ComA'
import ComB from './components/ComB'
import ComC from './components/ComC'
components:{
ComA :comA,//将引入的ComA赋值给ComA
ComB,ComC//如果赋值名相同,也可以省略冒号
}
4.在<template>中使用
<com-a></com-a>规则:所有的大写必须全部转成小写,并且以-区分(Vue1.0不识别
大写标签,会报错)
另外,传递的属性也需要该为小写,规则相同
5.通过is引入模板:
<p :is="com-a"></p>
好处:可以在那个位置渲染动态的组件
<p :is="comTorender"></p>
data(){
return{
comToRender:'com-b'//这里comToRender变为了一个动态的属性
}
}
6.父与子组件进行通信
比如子组件向父组件传递信息:Event:Emit触发或on监听
比如父组件向子组件传递信息:Props:Pass
在父组件中,<p number=8></p>
在子组件中,props:['number'],并且在子组件中可以进行number的渲染
也可以通过this.number获取到从父组件传来的值
注意:属性也是大小写不敏感的,需用-进行区分;
此时在父组件中number是一个字符串的形式<p number=8></p>
在子组件中指定类型时,也应该为String,或‘number’:[Number,String]
7.<input type="text" v-model = "myval">
<com-a :my-value = "myVal"></com-a>
//不可以写成<com-a my-value = "myVal"></com-a>
//此时my-value就是一个动态的属性,此处也应该在子组件中进行声明
props:{
'my-value':[Number,String]
}
8.子组件向外传递数据
(1)首先在子组件里面设置一个点击methods
在这个方法中:this.$emit('my-event',this.hello)
表示我们使父组件触发一个事件,名字叫做my-event,并且向这个方法传递一个参数
,即子组件的hello属性
(2)其次在父组件中监听被触发的事件my-event,当这个事件被触发时使其触发父组
件的另一个方法getMyevent(hello)在这个方法中接收一个从子组件传来的参数hello
,在这里就可以打印子组件的属性hello的值
9.父组件向子组件传递一个模板元素:插槽
(1)首先在父组件中
<com-a>
<p slot="header">123</p>//这里插入一个模板
</com-a>
(2)在子组件中加入标签<slot name="header">no slot</slot>
//为插槽设置默认值no slot,设置name方便子组件使用时定位
如:import ComA from './components/a'
2.在a.vue中,设置导出模板:
export default{
}
3.在当前父组件中注册子组件:
import ComA from './components/ComA'
import ComB from './components/ComB'
import ComC from './components/ComC'
components:{
ComA :comA,//将引入的ComA赋值给ComA
ComB,ComC//如果赋值名相同,也可以省略冒号
}
4.在<template>中使用
<com-a></com-a>规则:所有的大写必须全部转成小写,并且以-区分(Vue1.0不识别
大写标签,会报错)
另外,传递的属性也需要该为小写,规则相同
5.通过is引入模板:
<p :is="com-a"></p>
好处:可以在那个位置渲染动态的组件
<p :is="comTorender"></p>
data(){
return{
comToRender:'com-b'//这里comToRender变为了一个动态的属性
}
}
6.父与子组件进行通信
比如子组件向父组件传递信息:Event:Emit触发或on监听
比如父组件向子组件传递信息:Props:Pass
在父组件中,<p number=8></p>
在子组件中,props:['number'],并且在子组件中可以进行number的渲染
也可以通过this.number获取到从父组件传来的值
注意:属性也是大小写不敏感的,需用-进行区分;
此时在父组件中number是一个字符串的形式<p number=8></p>
在子组件中指定类型时,也应该为String,或‘number’:[Number,String]
7.<input type="text" v-model = "myval">
<com-a :my-value = "myVal"></com-a>
//不可以写成<com-a my-value = "myVal"></com-a>
//此时my-value就是一个动态的属性,此处也应该在子组件中进行声明
props:{
'my-value':[Number,String]
}
8.子组件向外传递数据
(1)首先在子组件里面设置一个点击methods
在这个方法中:this.$emit('my-event',this.hello)
表示我们使父组件触发一个事件,名字叫做my-event,并且向这个方法传递一个参数
,即子组件的hello属性
(2)其次在父组件中监听被触发的事件my-event,当这个事件被触发时使其触发父组
件的另一个方法getMyevent(hello)在这个方法中接收一个从子组件传来的参数hello
,在这里就可以打印子组件的属性hello的值
9.父组件向子组件传递一个模板元素:插槽
(1)首先在父组件中
<com-a>
<p slot="header">123</p>//这里插入一个模板
</com-a>
(2)在子组件中加入标签<slot name="header">no slot</slot>
//为插槽设置默认值no slot,设置name方便子组件使用时定位