//v-model在组件上使用就相当于是父传子和子传父的结合，用$refs来将input的value返回修改v-model绑定的数据
//与一般的子传父相比，就不需要用函数来接收数据了
//缺点就是在添加后虽然成功修改数据，但是页面要渲染没有很好的方法，像我只能在那个组件用@keydown.enter来渲染了
<!DOCTYPE html>
<html lang="en">
<head>
? <meta charset="UTF-8">
? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? <title>Document</title>
</head>
<body>
? <div id="app">
? ? <div>
? ? ? inputValue: {{ inputValue }}
? ? </div>
? ? <button @click="handleAppClick">获取组件中输入的数据</button>
? ? <todo-input v-model="inputValue"></todo-input>
? </div>
? <script src="./lib/vue.global.js"></script>
? <script>
? </script>
? <script>
? ? const todoInput = {
? ? ? template: `
? ? ? ? <div class="input">
? ? ? ? ? <input
? ? ? ? ? ? type="text"
? ? ? ? ? ? placeholder="请输入新待办事项"
? ? ? ? ? ? ref="inputRef"
? ? ? ? ? ? :value="modelValue"
? ? ? ? ? ? @input="handleAdd"
? ? ? ? ? >
? ? ? ? ? <button class="add" @click="handleAdd">添加</button>
? ? ? ? </div>
? ? ? `,
? ? ? props: ['model-value'],
? ? ? methods: {
? ? ? ? handleAdd() {
? ? ? ? ? this.$emit('update:model-value', this.$refs.inputRef.value)
? ? ? ? },
? ? ? },
? ? }
? ? Vue
? ? ? .createApp({
? ? ? ? data() {
? ? ? ? ? return {
? ? ? ? ? ? inputValue: ''
? ? ? ? ? }
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? handleAppClick() {
? ? ? ? ? ? console.log('点击父组件中按钮:', this.inputValue)
? ? ? ? ? },
? ? ? ? },
? ? ? })
? ? ? .component('todo-input', todoInput)
? ? ? .mount('#app')
? </script>
</body>
</html>