VUE3 + TS + 父子组件传值

VUE3 + TS + 父子组件传值

父组件:
传入几个变量,并且有接受子组件函数@changeaddress

                  <mapSelect
                    :latitude="latitude"
                    :longitude="longitude"
                    :isGetAddress="isGetAddress"
                    :isChangeAddress="isChangeAddress"
                    @changeaddress="getAddressInfoHandler"
                  />

这里为接受函数,子组件的返回值作为参数,之后赋值当前父组件某个变量。

// 获得子组件多个参数
let getAddressInfoHandler = (mapPosition) => {
  queryForm.currentLocation.latitude = mapPosition.lat;
  queryForm.currentLocation.longitude = mapPosition.lng;
}

子组件:
这里使用defineProps获取当前父组件回传值。如果需要实时检测父组件传回来值是否改变,我们需要下面的watch

// 父组件回传值
let fatherInfo = defineProps({
    latitude: {
        type: Number, //数据类型
        required: true, //是否必填
        default: 0, //默认值
    },
    longitude: {
        type: Number, //数据类型
        required: true, //是否必填
        default: 0, //默认值
    },
    isGetAddress: {
        type: Boolean, //数据类型
        required: true, //是否必填
        default: false, //默认值
    },
    isChangeAddress: {
        type: Number, //数据类型
        required: true, //是否必填
        default: 0, //默认值
    },
})

在这里我们使用watch一旦父组件传回来值,我们将进行某些操作。watch有两种,一种是同时监测两个变量,一旦其中一个变量变化将执行如下操作:

watch(
  [() => fatherInfo.latitude, () => fatherInfo.longitude],
  () => {
    整活
  },
  { deep: true }
);

另一种是单独监测某个变量,一旦变化,执行操作

watch(
  () => fatherInfo.isGetAddress,
  () => {
  操作
  },
  { deep: true }
);

还记得我们父组件也接受子组件不,这里子组件需要定义函数,需要操作时,在后面写入参数即可

// 子组件回传值
const changeaddress = defineEmits(['changeaddress'])
changeaddress('changeaddress', map.value.getCenter(), address);

这里defineProps似乎不可以分开,尝试了下报错了,所以才将父组件所有传值都放在一起,后面用.获取不同值。

中间有个操作是希望父组件一旦监测某俩个活动就执行,这时,如果设置boolean传入子组件就会发现如果我需要重新归false,就要重新再传给父组件,很容易导致俩活动一个修改后未归false又重新修改,这时我写了一个number值,一旦活动变化就将其加一,这样可以在子组件监测变化同时又不会俩个只有一个能动。但是需要注意这个number会不会过大等情况。

你可能感兴趣的:(typescript,javascript,前端)