您现在的位置是：首页 >技术交流 >vue3，组件和组件直接的通信网站首页技术交流

mitt是一个中间件，非常非常小的库

v-model,是一个双向绑定，默认其实有两个动作，父给子传了自己的数据过去，子通过自己的事件反向触发数据更新

以下示例：

        父组件

// 父组件使用自定义子组件的时候
<template>
  <div>
   首页
   <h3>{{ userName }}</h3>
   <helloWorld v-model="userName"   /> 
   <!-- <helloWorld :modelValue="userName"  @update:modelValue="userName = $event"   />  -->
  </div>
</template>

<script setup lang='ts'>
import {ref} from 'vue'
import helloWorld from '../components/HelloWorld.vue'

const userName = ref('')
</script>

<style scoped>
  
</style>

        子组件

// update: 是默认写法
<template>
  
<input type="text"  :value="modelValue" @input="emit('update:modelValue', $event.target.value)">
  
</template>

<script setup lang="ts">
import { ref } from 'vue'

defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

const count = ref(0)
</script>