VUE3.x教程（七）侦听器和组件

1、侦听器

所谓侦听器即监听某数据，当前发生变化时触发对应的函数。

watch() 可以直接侦听一个 ref，并且只要 count 的值改变就会触发回调。

以下例子中，监听todoId，当其发生变化时调用fetchData函数。

<script setup>
import { ref, watch } from 'vue'

const todoId = ref(1)
const todoData = ref(null)

async function fetchData() {
  todoData.value = null
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )
  todoData.value = await res.json()
}

fetchData()

// 监听todoId，todoId发生变化时调用fetchData，给todoData赋值
watch(todoId, fetchData)
</script>

<template>
  <p>Todo id: {{ todoId }}</p>
  // !todo表示为空，此时:disabled为true，将button置灰
  <button @click="todoId++" :disabled="!todoData">Fetch next todo</button>
  // !todo表示todo为空，此时显示Loading
  <p v-if="!todoData">Loading...</p>
  <pre v-else>{{ todoData }}</pre>
</template>

2、组件

 Vue 应用往往是由嵌套组件创建的。父组件可以在模板中渲染另一个组件作为子组件。要使用子组件，我们需要先导入它：

1、子组件

2、父组件引入子组件

<script setup>
import ChildComp from './ChildComp.vue'
</script>

<template>
  // 引入子组件，并显示其中的“<h2>A Child Component!</h2>”
  <ChildComp />
</template>