//可以通过?this.$refs将数据用子组件函数传递，在子组件函数接收数据，达到修改数据的目的
<!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>
? ? ? <input type="text" v-model.number="num1" /> +
? ? ? <input type="text" v-model.number="num2" />?
? ? ? <button @click="handlePlus">=</button>
? ? </div>
? ? <todo-input ?ref="todoInputRef"></todo-input>
? </div>
? <script src="./lib/vue.global.js"></script>
? <script>
? </script>
? <script>
? ? const todoInput = {
? ? ? template: `
? ? ? ? <div>两个数字相加之和: {{ sum }}</div>
? ? ? ? <div class="input">
? ? ? ? ? <input
? ? ? ? ? ? type="text"
? ? ? ? ? ? placeholder="请输入新待办事项"
? ? ? ? ? ? ref="inputRef"
? ? ? ? ? ? :value="modelValue"
? ? ? ? ? ? @input="handleAdd"
? ? ? ? ? >
? ? ? ? ? <button class="add" @click="handleAdd">添加</button>
? ? ? ? </div>
? ? ? `,
? ? ? data() {
? ? ? ? return {
? ? ? ? ? message: 'Hello',
? ? ? ? ? hobbies: [1,2,3,4,5],
? ? ? ? ? sum: 0,
? ? ? ? }
? ? ? },
? ? ? methods: {
? ? ? ? plus(num1, num2) {
? ? ? ? ? this.sum = num1 + num2
? ? ? ? },
? ? ? },
? ? }
? ? Vue
? ? ? .createApp({
? ? ? ? data() {
? ? ? ? ? return {
? ? ? ? ? ? inputValue: '',
? ? ? ? ? ? num1: 5,
? ? ? ? ? ? num2: 7,
? ? ? ? ? }
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? handlePlus() {
? ? ? ? ? ? this.$refs.todoInputRef.plus(this.num1, this.num2)
? ? ? ? ? },
? ? ? ? },
? ? ? })
? ? ? .component('todo-input', todoInput)
? ? ? .mount('#app')
? </script>
</body>
</html>