Vue3自定义组件v-model双向绑定

无能吐槽一下，虽然用了很多遍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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

1. defineEmits 定义一个事件呗

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

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

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

咋用你定义的组件啊

  <main-search
      placeholder="请输入企业名称"
      v-model:search-word="keyWord"
    />
1
2
3
4

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

update 这个是关键术语，表示数据更新了在通知