浅谈vue3里面的v-model指令_v-model:content

本来想着在vue3.X版本的项目中封装一个input组件，由于2.0中封装的收到擒来也就没有仔细去看文档最后导致效果怎么也实现不了，这就是不仔细看文档的代价吧，这里来说一下这个问题
在vue3.0版本中对v-model的改动个人认为还是挺大的 这里就以封装一个input组件为例

第一步在components文件夹中 创建一个myInput.vue文件

代码如下

	<template>
    <div>
        <input type="text" :value="modelValue" @input="iptChange">
    </div>
</template>

<script>
import { ref } from 'vue'
export default {
    props: {
        modelValue: String // 这里要注意 vue2中 v-model在input框中使用其实就是v-bind：value 和 @input事件的组合
        // 但是在3.0中 绑定的值为modelValue 这也就是我这里问题产生的原因
    },
    //setup接收两个参数 第一个参数其实就是本页面中的props属性 不过这个参数不建议解构赋值，因为如果解构赋值会使数据失去响应式
    // 第二个参数是一个上下文对象 暴露了vue2中输入this的属性和方法解构大概是这样的
    <!--{ attrs: (...)
		emit: (...) 这里的emit可以实现在vue2中的 this.$emit的功能 只不过要更新v-model的数据需要使用update 类似于一千的sync修饰符的写法
		expose: exposed => {…}
		slots: (...)
		get attrs: ƒ attrs()
		get emit: emit() { return (event, ...args) => {…}
		get slots: ƒ slots()
		__proto__: Object
	}-->
    setup(props, ctx) {
        function iptChange(e) {
        	// ctx 这里通过emit来修改父组件中v-model的数据
            ctx.emit('update:modelValue', e.target.value)
        }
        return {
            iptChange
        }
    }
}
</script>

<style scoped>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

在需要使用myInput的组件中

<template>
  <div class="home">
  
    <my-input v-model="content"></my-input>
  </div>
</template>

<script>
import myInput from '@/components/myInput'
import { ref, watchEffect } from 'vue'
export default {
  name: 'Home',
  components:{ // 这里使用了vue2的组件注册方法
    myInput
  },
  setup() {
    let content = ref('')
    watchEffect(() => { // watchEffect可以监听数据的变化 和watch的区别是不需要指定属性区监听
      console.log(content.value); 
    })
    return {
      content
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

补充说明

我们这个例子中使用的是 v-model=“content” 这种方法 在子组件中需要接受的值就是modelValue
如果你想修改一下接受的属性 可以这样写

 <my-input v-model:key="content"></my-input>
1

这样写的化我们就可以在子组件中的props中接收key属性也就是下面这种写法

<input :value="key"  @input="iptChange"/>
props： {
	key: String
}
// 当然这是修改的数据也就随之改变
setup(props, ctx) {
	 function iptChange(e) {
          ctx.emit('update:key', e.target.value)
      }
      return {
          iptChange
      }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

希望看到的小伙伴如果有其他方法或指正及时指出共同成长