2024-07-26 定义一个vue组件，并通过双向绑定进行通信

我写了一个input组件（vue3）

<template>
    <div>
        <input class="inp" :value="modelValue" 
        @input="$emit('update:modelValue', $event.target.value)"
         />
    </div>
</template>

<script>
export default {
    name: "tInput",
};
</script>

<script setup>
const props = defineProps({
    modelValue: {
        type: String,
        default: "",
    },
});
const emit = defineEmits(['update:modelValue']);
</script>

<style>
.inp {
    height: 28px;
    border-radius: 6px;
    font-size: 18px;
    line-height: 28px;
    padding: 0 4px;
}
</style>

然后在页面应用：

<template>
    <div class="t-ui-flex-start t-ui-gap-16">
        <t-input v-model="value"></t-input>
        <button @click="testBtn">测试</button>
    </div>
</template>

<script setup>
import { ref } from "vue";
const value = ref('');
const testBtn = () => {
    console.log("value", value.value);
}
</script>

效果图：

 当你在input框输入值时会同时更新input组件的value，然后点击【测试】按钮打印input的value值就是你输入的值

 

问题1：一个普通的组件如何实现双向绑定？

使用defineEmits暴露出$emit值，并用$emit绑定组件的一些设值方法，如

@input="$emit('update:modelValue', $event.target.value)"

 

问题2：为什么我写的和你的差不多一样，但是点击按钮想打印出input的值却死活都是空？

原因：应该是你的@input事件写错了，检查有没有空格，我就是在'update: modelValue'中间写了个空格导致无法获取到input的值！

 

问题3：设计组件双向数据绑定时为什么不能随便给组件绑定一个value值？

原因：给组件设计双向数据绑定的变量名的固定写法为modelValue，不能写成其他名称如value亦或者inpValue等等，这是一种固定写法，当你使用了该名称作为input的value值时，就可以使用双向数据绑定input的value值。