关于代码拆分

来源:6-7 使用 Composition API 开发TodoList(2)

FanYiyang

2021-01-15

`// input狂输入item
const inputValueChange = () => {
const { ref } = Vue
const todoItem = ref(’’)
const handleInputValue = (e) => {
todoItem.value = e.target.value
}
return {
todoItem,
handleInputValue
}
}

// 添加item
const listAddTodoList = () => {
const { reactive } = Vue
const list = reactive([])
const addItemList = (item) => {
list.push(item)
}
return {
list,
addItemList
}
}

// 创建实例
const app = Vue.createApp({
setup() {
const { todoItem, handleInputValue } = inputValueChange()
const { list, addItemList } = listAddTodoList()
return {
todoItem, handleInputValue,
list, addItemList
}
},
template: <div> <input :value="todoItem" @input="handleInputValue"/> <button @click="() => addItemList(todoItem)">添加</button> </div> <ul> <li v-for="(item, index) of list"> {{item}} </li> </ul>,
}).mount(’#root’)`

老师,就是每次点击确定按钮后我需要清空input里面的值,但是我的点击方法是放置在listAddTodoList函数中的,请问下如何去清空todoItem的值呢?

写回答

1回答

Dell

2021-01-16

listAddTodoList 导出这个方法,然后在主文件引用这个方法,再导出给模版去调用

1
3
FanYiyang
非常感谢!
2021-01-18
共3条回复

Vue3入门与项目实战 掌握完整知识体系

明星讲师DELL亲授,全方位知识点+高匹配度项目,入门到深度掌握

3382 学习 · 1454 问题

查看课程