VUE关于父组件实时监听子组件的方法
- 利用vuex来解决
- 利用子组件监听(watch)触发父组件($emit)方法来解决
方法一可以参照这个,应该可以实现(反正我没用)
方法二
<template>
<div class="rdo-grp">
<template v-for="item in currentListKey">
<input :id="currentValue[item]+'label'" type="radio" :name="radioName" v-model="radioValue" :value="item" :key="currentValue[item]+'input'">
<label :for="currentValue[item]+'label'" :key="currentValue[item]"><span></span><span>{{item}}-{{currentValue[item]}}</span></label>
</template>
</div>
</template>
<script>
export default {
name: 'radioComponent',
props: ["currentValue"],
data () {
return {
radioValue:"1",
radioName:this.currentValue[Object.keys(this.currentValue)[0]],
currentListKey:Object.keys(this.currentValue),
};
},
created(){
},
watch:{
"radioValue":function(newValue,oldValue){
this.$emit('childFn', newValue);
}
},
</script>
<template>
<div>
{{radioFlag}}
<ui-radio :currentValue="importTp" ref="uiRadio1" @childFn="changFlag"></ui-radio>
</div>
</template>
<script>
export default {
props: ["link_unique_trade_datas"],
data() {
return {
addParams:{
fileName:"",
file:[],
},
radioValue:"",
importTp:{
"1":"文件导入",
"2":"数据源导入",
},
importMtd:{
"1":"覆盖导入",
"2":"存在忽略导入",
"3":"精确导入"
},
radioFlag:"1",
};
},
methods: {
changFlag(radioValue){
this.radioFlag = radioValue;
},
}
}