Vue

深层子组件使用上层组件的方法

方式一：使用 project inject

parent

provide('make', function (){
    console.dir('make');
});

nest child

const make = inject('make')
make();

方式二：使用第三方包 mitt

mitt.ts

import _ from 'mitt';
const mitt = _();
export default mitt;

parent

import mitt from "./mitt";

mitt.on('make', function () {
	console.dir('make')
})

nest child

import mitt from "./mitt";

mitt.emit('make');

v-model object

parent.vue

<script setup>
const character = reactive({
  pet: {
    name: 'foo'
  }
})
</script>

<template>
  <pet v-model="character.pet"></pet>
</template>

pet.vue

<script setup lang="ts">
interface Pet{
    name: string
}
interface Props{
    modelValue: Pet
}
const props = defineProps<Pet>()
const emit = defineEmits(['update:modelValue']);
const _ = props.modelValue || {name: 'bar'}
const pet = reactive(_)

watch(pet, () => {
    emit('update:modelValue', pet);
})
</script>

<template>
  <input v-model="pet.name" />
</template>