父子组件传值

1.最基础的

父组件

<ComponentA  @getData="getData" :value="'父组件传给子组件的值'"></ComponentA >


methods:{
  getData(val){
  console.log(val)//'子组件传给父组件的值'
  }
}

子组件

<button @click="sendData">点击</button>

props:{
 value:{
   type:String,
   default:''
  }
},
moutend(){
console.log(value)//父组件传给子组件的值
},
methods:{
  sendData(){
   this.$emit('getData','子组件传给父组件的值')
  }
}

2.传对象类型的值可以直接修改

父组件

<ComponentA :value="value"></ComponentA >

data(){
  value:{
    name:'小明',
    age:18
   }
}

子组件

<button @click="sendData">点击</button>

props:{
 value:{
   type:Object,
   default:function(){
      return {}
    }
  }
},
moutend(){
console.log(value)//父组件传给子组件的值
},
methods:{
  sendData(){
   this.value.age=20//此时不会报错
  }
}

3.靠ref直接触发

父组件

<ComponentA :ref="zzj"></ComponentA >

methods:{
  sendData(){
   this.$ref.zzj.sendData('父组件传给子组件的值')
  }
}

子组件

methods:{
  sendData(val){
   console.log(val)//'父组件传给子组件的值'
  }
}

4.sync不用加监听

<ComponentA :value.sync="'父组件传给子组件的值'"></ComponentA >
//不用监听$emit触发的事件，直接修改value的值

子组件

<button @click="sendData">点击</button>

props:{
 value:{
   type:String,
   default:''
  }
},
moutend(){
console.log(value)//父组件传给子组件的值
},
methods:{
  sendData(){
   this.$emit('updata：value','子组件传给父组件的值')//不用监听$emit触发的事件，直接修改value的值，updata是vue约定好的命名
  }
}

5.v-model还能用在组件上

<ComponentA  v-model="value"></ComponentA >
//不用监听$emit触发的事件，直接修改value的值


data(){
  return{
    value:'父组件传给子组件的值'
   }
}

子组件

<button @click="sendData">点击</button>

props:{
 value:{
   type:String,
   default:''
  }
},
moutend(){
console.log(value)//父组件传给子组件的值
},
methods:{
  sendData(){
   this.$emit('input','子组件传给父组件的值')//不用监听$emit触发的事件，直接修改value的值，updata是vue约定好的命名
  }
}