vue中的父子组件
父子组件:
在组件中还有一个组件,在父组的模板中可以使用子组件
语法格式:
new Vue({
el:"",
data:{
},
components:{
'父组件名':{
template:"父组件模板id",
data:function(){} => data(){}, 父组件的数据
components:{
'子组件名':{
template:"子组件模板id",
data(){
return{
键:值
}
}
}
}
}
}
})
使用:
body
div id app
<父组件></父组件>
<template id="父">
<子组件名></子组件名>
</template>
<template id="子">
</template>
父传子:
1.父组件如果需要传递给子组件,需要在父组件模板中在使用子组件的时候,给子组件标签设置一个自定义属性
2.需要在子组件中接收父子件在使用子组件时传递的参数(自定义属性):
子组件:
'myChile':{
props:{
自定义属性:{
type:String,
default:''
}
}
}
3.在使用子组件接收到的父组件传入的值
在子组件模板中使用传递进来的数据
使用文本插值的方式使用数据 {{自定义属性}}
子传父:
子传值给父级的时候,需要有一个契机
在子组件中声明一个自定义事件,语法格式: this.$emit("自定义事件名",'要发送出去的数据')
