Vue入门之watch、组件、Props

天行健，君子以自强不息；地势坤，君子以厚德载物。

每个人都有惰性，但不断学习是好好生活的根本，共勉！

文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。

兴酣落笔摇五岳，诗成笑傲凌沧洲。
功名富贵若长在，汉水亦应西北流。
------《江上吟》

文章目录

Vue入门之watch、组件、Props

Node.js的下载、安装和配置
 node的下载、安装、配置和使用（node.js下载安装和配置、npm命令汇总、cnpm的使用）
Vue3入门之创建vue3的单页应用(vite+vue)
Vue入门第一篇（环境配置、脚手架安装、项目创建、项目运行访问、项目结构详解等）
Vue入门第二篇（基本语法、实例演示）
Vue专栏

文末附本文所有示例代码的下载地址以及基于vite构建vue3的项目demo地址

1. `watch`

侦听器
watch可侦听一个ref或其他类型的数据源，当值改变时会触发回调

注意：在使用${}进行参数传入的时候需要将其使用Tick反引号`包裹

1.1 script setup

script setup标签内的代码

// 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}')
// })

1.2 template

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>

1.3 style scoped

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;
}

1.4 页面效果

控制台npm run dev启动项目，访问服务页面http://localhost:5173/
查看页面效果

点击Fetch next todo按钮进行数据更新，通过更新todoId，触发调用随id改变的数据

2. 组件

Vue中除了单组件Single-File Component使用外还可以嵌套组件
一般的Vue应用往往由嵌套组件创建而成

父组件在模板中渲染另一个组件作为子组件，使用子组件只需在父组件中导入即可
导入方式

import 自定义的子组件名 from '子组件文件路径'

一般情况下，在src下创建类似App.vue的子组件，然后在App.vue中引入使用
以下为使用子组件的案例

2.1 子组件创建

在src文件夹下创建一个名为ChildComp.vue的子组件文件

子组件内容如下

<script setup>
    
</script>

<template>
    <div>
        <p>Hello World!</p>
    </div>
</template>

然后就是在主组件App.vue中引入使用子组件，以下代码为在App.vue中编写

2.2 script setup

script setup标签内的代码

// 10. 组件
//在文件夹中编写vue组件文件，然后在这里引入
import ChildComp from './ChildComp.vue'

2.3 template

template标签内的代码

  <!-- 10.  -->
  <div>
    <h2>10. 组件</h2>
    <ChildComp id="c-10"/>
  </div>

2.4 style scoped

style scoped标签内的代码

/* 10.  */
#c-10{
  height: 80px;
  width: 400px;
  text-align: center;
  border-radius: 15px;
  background-color: teal;
  font-size: 40px;
  font-family: 'Courier New';
}

2.5 页面效果

控制台npm run dev启动项目，访问服务页面http://localhost:5173/
查看页面效果，子组件中的内容为Hello World!，在主组件中引入子组件，标签中不写任何内容，页面也会展示子组件中的内容

3. `Props`

动态数据接收
子组件可通过props从父组件接收动态数据

在js中声明props
defineProps()是一个编译时宏，无需导入
声明props后，props就可以在子组件的模板中使用，通过defineProps()所返回的对象在js中访问
父组件可以声明标签来传递props
如果要传递动态值，可使用v-bind

3.1 子组件创建

在src文件夹下创建子组件CildCompProps.vue

子组件中代码如下

<script setup>
    // defineProps()是编译时宏，无需导入，
    //一旦声明，msg参数就可以在子组件模板中使用，通过defineProps所返回的对象在js中访问
    const props = defineProps({
        msg:String
    })
</script>

<template>
    <div>
        {
  { msg || 'No props passed yet' }}
    </div>
</template>

接下来回到主组件App.vue中引用子组件，以下代码均为App.vue中编写

3.2 script setup

script setup标签内的代码

// 11. Props 
//动态数据接收，从父组件接收动态数据到子组件，现在子组件中声明
import ChildCompProps from './ChildCompProps.vue'
const greeting = ref('Hello from parent')
// defineProps()

3.3 template

template标签内的代码

  <!-- 11.  -->
  <div>
    <h2>11. Props</h2>
    <!-- 动态绑定 -->
    <ChildCompProps id="c-11" :msg="greeting" />
  </div>

3.4 style scoped

style scoped标签内的代码

/* 11.  */
#c-11{
  height: 200px;
  width: 400px;
  text-align: center;
  border-radius: 15px;
  background-color: chocolate;
  font-size: 40px;
  font-family: 'Courier New';
}

3.5 页面效果

控制台npm run dev启动项目，访问服务页面http://localhost:5173/
查看页面效果，子组件中的msg变量是通过props将js中greeting的内容绑定过来

4. 代码示例

以上示例的代码已打包上传到CSDN资源库，可自行下载获取示例代码
下载地址：Vue watch 组件 Props 语法示例演示代码

5. 项目demo

本文示例代码都是基于vite构建的vue3项目编写，项目demo也已上传CSDN资源库
下载地址：Vue 基于vite构建vue3项目以及基础语法演示
下载后如想正常运行项目，需先有node环境，可根据文章开始的链接进行下载安装node环境，以及配置node环境变量

感谢阅读，祝君暴富！

原文链接: https://hanshan.blog.csdn.net//article/details/140498433

Vue入门之watch、组件、Props

文章目录