老师有一个问题。

来源：2-8 使用 Composition API 开发TodoList（2）

帅得无心敲代码

2021-05-30 00:08:13

按照视频老师的方法拆分代码。按钮输出渲染了以后，input框里还有值，我想把这个值清除掉。但是在按钮点击事件里面操作不了双向绑定的值，这该怎么操作呀？对了还有一个问题，在app实例外外面使用Vue实例为啥能拿到实例里面的方法呢？我还以为只能在app实例里面使用呢

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todo List</title>
</head>
<body>
    <div id="root"></div>
    <script src="./vue3基础源码/vue3.js"></script>
    <script>

        const inputFn = () => {
            const {ref} = Vue;
            let inputValue = ref("");

            return {inputValue};
        }

        const toList = () => {
            const {reactive} = Vue;

            const list = reactive([]);
            const handleClick = (val) => {
                list.push(val);
                val = '';
            }
            return {handleClick,list};
        }


        const app = Vue.createApp({
            setup(props,context){
                let {inputValue} = inputFn();

                const {handleClick,list} = toList();

                return {inputValue,handleClick,list};

            },
            template:`
                    <input v-model="inputValue" />
                    <button @click="handleClick(inputValue)">提交</button>
                    <ul>
                        <li v-for="(item,index) in list" :key="index">{{item}}</li>
                    </ul>
                    `
        });



        const vm = app.mount("#root");
    </script>
</body>
</html>