无能吐槽一下,虽然用了很多遍v-model,但是还是不得要领,每次看官网都感觉说的不是很清晰,在写的时候还是要查看文档,可能就是不理解原理,这次特意好好写一篇文章,让自己好好理解一下。
自定义一个组件
假设我们自定义一个搜索框组件,样式肯定是比input 标签本身的好看,在配上搜索按钮
这里的代码就不描述了
组件需要参数吧
搜索框输入的文本你怎么告诉别人,双向绑定呗
- 定义一个参数,组件定义参数 defineProps,没错吧
<template><div class="search_btn"><div class="search_icon" /><input /></div>
</template><script setup lang="ts">
defineProps({searchWord: {type: String,required: false}
});
</script>
- 在给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>
别人用你的组件参数变化了你得告诉别人吧
- defineEmits 定义一个事件呗
const emits = defineEmits(['update:searchWord']);
- 啥时候通知啊,文本输入的有变化就通知呗,绑定@input事件
@input="$emit('update:searchWord', $event.target.value)"
- 上个完整的代码
<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"/>