Vue学习笔记-自定义组件使用v-model-优快云博客

拆解实现

父组件

<template>
  <div>
  </div>
  <Son :name="name" @inputChange="inputChange"></Son>
  {{ name }}
</template>


<script setup>
import {ref} from 'vue'
import Son from './son2.vue'

const name=ref("张三")

const inputChange=(value)=>{
  name.value=value
}
</script>

<style  scoped>

</style>

子组件

<template>
  <div>
    <input type="text" :value="name" @input="inputChange">
  </div>
</template>


<script setup>
defineProps(['name'])

const inputChange=({target:{value}})=>{
emit('inputChange',value)
}
const emit=defineEmits(['inputChange'])




</script>

<style  scoped>

</style>

然后进行改造成我们想要的v-model形式

父组件这边

<template>
  <div>
  </div>
  <!-- <Son :name="name" @inputChange="inputChange"></Son> -->
  <Son v-model:aaa="name" age="18"></Son>
  {{ name }}
</template>


<script setup>
import {ref} from 'vue'
import Son from './son2.vue'

const name=ref("张三")

const inputChange=(value)=>{
  name.value=value
}
</script>

<style  scoped>

</style>

注意和之前的父组件内容进行对比

再来到子组件这里

<template>
  <div>
    <!-- <input type="text" :value="name" @input="inputChange"> -->
    <input type="text" :value="aaa" @input="inputChange">
  </div>
</template>


<script setup>
// defineProps(['name'])


// const emit=defineEmits(['inputChange'])
//v-model必须要使用update：开头
//然后跟上对应的v-model的属性名
const emit=defineEmits(['update:aaa'])
//这个时候defineProps接收的是v-model传过来的值
//注意：v-model传功来的属性和父子传值的属性不能重名

//aaa 就是v-model的值
//age 就是 父子传值的属性

defineProps(['aaa','age'])


const inputChange=({target:{value}})=>{
emit('update:aaa',value),
console.log({target:{value}});
console.log("value",value);
console.log("target",event.target);
//{target:{value}} 解构赋值
console.log(event.target.value===value);
}



</script>

<style  scoped>

</style>

这样就完成了自定以组件的双向绑定。

其中，有几个需要注意的地方，就是使用defineProps()时，注意区分v-model的值和父子传值的属性。

还有就是那个update:aaa中的update，这里使用update是vue框架官方的写法，如果想要叫其他值，就还需要父组件传递对应的事件@custom-update:myValue="someData = $event"，过程也比较繁琐，这里只是说明为什么那里要叫update。在实际的开发中还是使用这种固定命名的比较便于开发。

==============================补充==============================

如果想要像使用UI组件库那样，直接在使用的时候使用v-model而不是还要加上自己的命名v-model:aaa这样的，那我们就要做如下修改：
首先父组件：

<template>
  <div>
  </div>
  <!-- <Son :name="name" @inputChange="inputChange"></Son> 

    <Son v-model:aaa="name" age="18"></Son>
-->
    <Son v-model="name" age="18"></Son>
  
  {{ name }}
</template>


<script setup>
import {ref} from 'vue'
import Son from './son2.vue'

const name=ref("张三")


</script>

<style  scoped>

</style>

这样自定义组件的v-model使用就像使用UI组件库一样了，

然后主要是改变子节点，

<template>
  <div>
    <!-- <input type="text" :value="name" @input="inputChange">
     <input type="text" :value="aaa" @input="inputChange">
这里就不要使用我们自定义的value值aaa了，而是vue3默认的modelValue
 -->
     <input type="text" :value="modelValue" @input="inputChange">
   
  </div>
</template>


<script setup>
// defineProps(['name'])


// const emit=defineEmits(['inputChange'])
//v-model必须要使用update：开头
//然后跟上对应的v-model的属性名
const emit=defineEmits(['update:modelValue'])
//这个时候defineProps接收的是v-model传过来的值
//注意：v-model传功来的属性和父子传值的属性不能重名

//aaa 就是v-model的值
//age 就是 父子传值的属性

//其实就是以前写aaa的地方都换成modelValue,因为vue3默认接受的值就是modelValue，所以我们在父组件中就可以省略冒号后面的自定义value。
defineProps(['modelValue','age'])

const inputChange=({target:{value}})=>{
emit('update:modelValue',value),
console.log({target:{value}});
console.log("value",value);
console.log("target",event.target);
//{target:{value}} 解构赋值
console.log(event.target.value===value);
}



</script>

<style  scoped>

</style>