第一步在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>
在需要使用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>
补充说明
我们这个例子中使用的是 v-model=“content” 这种方法 在子组件中需要接受的值就是modelValue
如果你想修改一下接受的属性 可以这样写
<my-input v-model:key="content"></my-input>
这样写的化我们就可以在子组件中的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
}
}