1.1 通过ref起别名,通过$refs获取实例、 绑定input事件、将值定义在响应数据rective中
<input type="text" ref="reftxt" @input="getValue" :value="txt">
1.2 导入需要的钩子 reactive(响应数据)、toRefs(将响应数据转结果对象)、 getCurrentInstance(获取实例,相当于this)
import {reactive,toRefs,getCurrentInstance} from "vue"
1.3 在setup方法中操作
export default{
name:"Home",
setup() { //相当于vue2 beforeCreate 和created
const state = reactive({
txt:'',//1.绑定
})
let {ctx} =getCurrentInstance()// 2.获取实例
const getValue=()=>{
console.log('触发了');
//this.$refs.reftxt.value vue2语法
state.txt=ctx.$refs.reftxt.value //vue3语法 3. 赋值
}
return { //4.返回出去
// state,
...toRefs(state),
getValue,
}
}
}
<