vue基础自定义组件数值传递

父组件:

<template>
  <div class="md:hero mx-auto p-4">
        <inputDiy v-model:value="inputValue" @submit="handleSubmit" />
        <p style="color: #fff;">当前输入的内容：{{ inputValue }}</p>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import inputDiy from "../components/inputDiy.vue"

const inputValue = ref('000');

watch(inputValue,(now)=>{
  console.log("a父组件==>",now)
})

const handleSubmit = (value) => {
  console.log('提交的内容:', value);
};
</script>

子组件:

<template>
  <div>
    <a-input  v-model:value="inputValue" @change="handleInput" placeholder="请输入内容"/>
    <a-button @click="handleClick">提交</a-button>
  </div>
</template>

<script setup>
import { defineProps, defineEmits ,ref, watch} from 'vue';

const props = defineProps({
  value: {
    type: String,
    default: ''
  }
});

const inputValue=ref(props.value);

const emit = defineEmits(['update:value', 'submit']);

const handleInput = (event) => {
  emit('update:value', event.target.value);
  console.log("a子组件=111=>",props.value)
};

watch(()=>props.value,()=>{
  console.log("a子组件=222=>",props.value)
})

const handleClick = () => {
  emit('submit', props.value);
};

</script>

<style scoped>
input {
  margin-right: 10px;
  padding: 5px;
  font-size: 14px;
}

button {
  color: #fff;
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
}
</style>

父=>子 通过peops
子=>父 通过emit