一、方法1:通过v-model,子组件使用model绑定属性
1.父组件中
//调用的子组件
<upload-img v-model="form.coverUrl" ></upload-img>
<script>
export default {
data(){
return{
form:{
coverUrl:'',
}
}
}
</script>
2、子组件中
<template>
<div>
<button @click="clickBtn"></button>
</div>
</template>
<script>
export default {
name: 'upload-img',
props: ['value'],
model: {
prop: 'value',//获取父组件传来的值
event: 'change',//方法,通过emit将子组件值传给父组件
},
data() {
return {
}
},
methods: {
clickBtn() {
this.$emit('change',this.value+2);//传递this.value+2给父组件
},
},
}
</script>
二、方法2:通过v-model,子组件使用value,input绑定属性
1.父组件中
//调用的子组件
<upload-img v-model="form.coverUrl" ></upload-img>
<script>
export default {
data(){
return{
form:{
coverUrl:'',
}
}
}
</script>
2、子组件中
<template>
<div>
<button @click="clickBtn"></button>
</div>
</template>
<script>
export default {
name: 'upload-img',
props: {
value: { // 必须要使用value
default: '',
},
},
methods: {
clickBtn() {
this.$emit('input', this.value+2) // 这儿必须用input 发送数据,发送的数据会被父级v-model=“test”接受到,再被value=form.coverUrl传回来。
},
},
}
</script>
三、方法3:通过.sync 修饰符
1.父组件中
//调用的子组件
<wordInput :wordVal.sync='inputVal'/>
2、子组件中
<template>
<div>
<input type="text" v-model="wordValShow">
</div>
</template>
<script>
export default {
name: 'wordInput',
props:{
wordVal:{
type:String,
default:''
}
},
data(){
return {
wordValShow:this.wordVal
}
},
watch:{
wordValShow(val){
this.$emit('update:wordVal', val)
}
}
}
</script>