父子组件互相传值

父子组件互相传值

父组件向子组件传递数据
实现方法：子组件中通过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
  }
}
父组件接收子组件数据时，接收的方法需绑定在子组件上