vue父组件向子组件传值时,如果值会根据父组件的相关操作而变化,则需要在子组件里用watch对其进行监听

1、父组件

<template>
  <div>
      <air-station :value="value"></air-station>
  </div>
</template>
import AirStation from '../components/air/AirStation'
export default {
    components: {
      AirStation,
    },
    data(){
      return{
        value:'',
      }
    },
    methods:{
      onZdzClick(item){
        this.value=item.id;
      }
    }
  }

2、子组件

<template>
  <div>
    
  </div>
</template>

<script>
export default {
  props: ['value'],      //父组件传来的值放到props里,而非data里定义
  data () {
    return {}
  },
  methods: {
    queryData(param) {
     
    }
  },
  watch:{     //监听value的变化,进行相应的操作即可
    value: function(a,b){     //a是value的新值,b是旧值
      this.queryData(a);
    }
  }

}
</script>
Logo

前往低代码交流专区

更多推荐