子组件动态修改父组件值
第一种:父组件用 :变量名="" @方法
父组件传递值给子组件
用 v-bind:inputName传递一个值
<date-pick :inputName="item.label" @changeInputName="changeName($event,item)"></date-pick>
//这里传item是因为传item,然后修改里面的属性可以有一个动态的数据修改。自己把握
父组件中定义changeName方法
changeName (val, item) {
item.label = val
}
子组件获取父组件的值
props: ['inputName']
子组件在data上定义数据 fatherInputName
注意这里fatherInputName要用从Props里的数据来初始化
data () {
return {
fatherInputName: this.inputName
}
}
在子组件中监听fatherInputName的改变
watch: {
fatherInputName (nval) {
this.$emit('changeInputName', nval) // 这里和父组件上的@changeInputName保持一致啊,默认的第一个参数一定是$event
}
}
第二种: .inputName.sync方法
父组件传递给子组件 用sync
<date-pick :inputName.sync="item.label"></date-pick>
子组件获取也是用props
props: ['inputName'],
一样用data定义个参数 fatherInputName
fatherInputName: this.inputName,
监听参数fatherInputName
watch: {
fatherInputName (nval) {
this.$emit('update:inputName', nval)
}
},
第三种: 在自定义组件上用v-model
<date-pick v-model="item.label"></date-pick>
在子组件Props中用value接收,input发送事件
props: {
value: {
type: String
}
}
子组件中定义自己的数据 data
fatherInputName: this.value,
子组件利用watch监听 子组件中表单v-model改变,从而发给父组件让父组件发生改变
watch: {
fatherInputName(nval){
this.$emit("input",nval)
}
},
子组件的template用刚刚定义的fatherInputName
<el-input v-model="fatherInputName"></el-input>
第四种:上面都是用的watch,实际也可以使用computed来操作,也就是前3种都可以配合computed组合成6种
父组件传值给子组件
<date-pick :inputName="item.label" @changeInputName="changeName($event,item)"></date-pick>
子组件用props接受值
props: ['inputName'],
子组件template , v-model的是computed的数据
<el-input v-model="fname"></el-input>
子组件中定义数据
data () {
return {
fatherInputName: this.inputName,
// 控住设置时段的显示与隐藏
dialogVisible: false,
}
}
子组件中用computed去改变值
computed:{
fname: {
set: function (nval) {
this.$emit('changeInputName', nval)
this.fatherInputName = nval
},
get: function () {
return this.fatherInputName
}
}
},