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会不会过大等情况。