无能吐槽一下，虽然用了很多遍v-model，但是还是不得要领，每次看官网都感觉说的不是很清晰，在写的时候还是要查看文档，可能就是不理解原理，这次特意好好写一篇文章，让自己好好理解一下。

自定义一个组件

假设我们自定义一个搜索框组件，样式肯定是比input 标签本身的好看，在配上搜索按钮

这里的代码就不描述了

组件需要参数吧

搜索框输入的文本你怎么告诉别人，双向绑定呗

1. 定义一个参数，组件定义参数 defineProps，没错吧

 <template><div class="search_btn"><div class="search_icon" /><input /></div>
</template><script setup lang="ts">
defineProps({searchWord: {type: String,required: false}
});
</script>

2. 在给input 框绑定上这个参数 :value=“searchWord”，这样你在你定义的组件里面不就能获取到输入的值了吗

 <template><div class="search_btn"><div class="search_icon" /><input :value="searchWord" /></div>
</template><script setup lang="ts">
defineProps({searchWord: {type: String,required: false}
});
</script>

别人用你的组件参数变化了你得告诉别人吧

1. defineEmits 定义一个事件呗

const emits = defineEmits(['update:searchWord']);

2. 啥时候通知啊，文本输入的有变化就通知呗，绑定@input事件

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

3. 上个完整的代码

 <template><div class="search_btn"><div class="search_icon" /><input :value="searchWord" @input="$emit('update:searchWord', $event.target.value)"/></div>
</template><script setup lang="ts">
defineProps({searchWord: {type: String,required: false}
});
const emits = defineEmits(['update:searchWord']);
</script>

咋用你定义的组件啊

  <main-searchplaceholder="请输入企业名称"v-model:search-word="keyWord"/>

到这里你可能有点疑问，官方的咋没有：search-word 后面这段，可以理解为原来的就是默认值，你给了就用你的，默认值就是modelValue，如果你组件里面也叫这个，你就不用说你参数叫啥了。