Vue watch 组件 Props 语法示例演示代码

<script setup> import { ref, watch } from 'vue' // 9. 侦听器 watch const todoId = ref(1) const todoData = ref(null) console.log(`${todoId.value}`) // 根据todoId获取todoData的数据 async function fetchData(){ todoData.value = null // fetch中的链接地址，因为有${}这种语法，所以使用的是Tick键反引号`符号，而不是单引号或者双引号 const res = await fetch(`https://jsonplaceholder.typicode.com/todos/${todoId.value}`) todoData.value = await res.json() } // 执行函数 fetchData() // 执行函数侦听器，id更新，数据就更新 watch(todoId, fetchData) // const count9 = ref(0) // watch(count9, (newCount9)=>{ // console.log('new count9 is : ${nweCount9}') // }) // 10. 组件 //在文件夹中编写vue组件文件，然后在这里引入 import ChildComp from './ChildComp.vue' // 11. Props //动态数据接收，从父组件接收动态数据到子组件，现在子组件中声明 import ChildCompProps from './ChildCompProps.vue' const greeting = ref('Hello from parent') // defineProps() </script> <template> <!-- 9. --> <div> <h2>9. 侦听器 watch</h2> <p id="p-9">Todo id: {{ todoId }}</p> <button id="btn-9" @click="todoId++" :disabled="!todoData">Fetch next todo</button> <p id="p-92" v-if="!todoData">Loading...</p> <pre id="pre-9" v-else>{{ todoData }}</pre> </div> <!-- 10. --> <div> <h2>10. 组件</h2> <ChildComp id="c-10"/> </div> <!-- 11. --> <div> <h2>11. Props</h2> <!-- 动态绑定 --> <ChildCompProps id="c-11" :msg="greeting" /> </div> </template> <style scoped> /* 9. */ #p-9{ height: 30px; width: 200px; text-align: center; border-radius: 2px; background-color: slategray; font-size: 20px; } #btn-9{ height: 30px; width: 200px; text-align: center; border-radius: 15px; background-color: orchid; font-size: 20px; } #p-92{ height: 400px; width: 800px; text-align: center; border-radius: 15px; background-color: green; font-size: 20px; } #pre-9{ height: 400px; width: 800px; text-align: center; border-radius: 15px; background-color: green; font-size: 20px; } /* 10. */ #c-10{ height: 80px; width: 400px; text-align: center; border-radius: 15px; background-color: teal; font-size: 40px; font-family: 'Courier New'; } /* 11. */ #c-11{ height: 200px; width: 400px; text-align: center; border-radius: 15px; background-color: chocolate; font-size: 40px; font-family: 'Courier New'; } </style>