父组件向子组件传递数据
实现方法:子组件中通过props自定义一个prop或者多个prop来接收父组件传递过来的数据,每个prop的名字和父组件绑定数据的命名必须一致:
例如:
子组件内容:
export default{
props:[“id”,”title”]
}//这里接收数据写法
<template>
<div>
<h1>{{id}}{{title}}</h1>
</div>
</template>//这里是使用数据的写法
父组件内容:
Import Child from ‘path’ //导入子组件
export default{
data(){
return{
childId:”001”,
childTitle:”我是传给子组件的title”
}
}
}//这里想要传递的数据
<template>
<div>
<child :id=”childId” :title=”childTitle”></child>
</div>
</template>//这里是传递数据的写法
子组件向父组件传递数据
实现方法:在子组件中通过$emit方法,传递数据给父组件,emit数据时,子组件传递数据的命名和父组件接收数据时的命名必须一致
例如:
子组件中的内容
data(){
return(){
toParentValue:”我是子组件传递的内容”
}
},
methods:{
emitToParent(){
This.$emit(‘sendData’,this.toParentValue)
}
}
父组件中的内容
Import Child from ‘path’ //导入子组件
<template>
<div>
<child @sendData=”showChildData”></child>
<h1>{{sendValue}}
</div>
</template>
data(){
return(){
sendValue:”我是父组件内容”
}
},
methods:{
showChildData(val){
This.sendValue=val
}
}
父组件接收子组件数据时,接收的方法需绑定在子组件上