一、基础模板
<template>
<div>Test</div>
<sonCon>
</template>
<script setup>
// 导入
import { ref } from 'vue'
// 导入子组件
import { sonCon } from './components/soncon.vue'
// 定义变量
// 普通变量
const message = "Hello world!"
// 响应式变量
const count = ref(0)
// 定义方法
const logCount = ()=>{
console.log(count.value)
}
// 生命周期函数 以onMounted为例
import { onMounted } from 'vue'
onMounted(()=>{
console.log("onMounted")
})
// 计算属性
import { computed } from 'vue'
const computRes = computed(()=>{
// 此处进行操作 返回值被computRes接收
return res
})
// 监听
import { watch } from 'vue'
// 监听单个响应式变量
watch(count,(newVal,oldVal)=>{
// 进行处理
})
// 监听多个响应式变量
const var1 = ref("Hello")
const var2 = ref("World")
watch([var1,var2],([newVar1,newVar2],[oldVar1,oldVar2])=>{
// 进行处理
})
<script>
注：
- 组合式API不需要使用export default进行导出，不需要使用return返回。
- setup中的this指向undefineed
1.普通变量
const var = "Hello world!"
2.普通方法
const logVar = ()=>{ }
3.响应式变量
- 使用reactive:传入一个对象，使用变量时通过"变量名.属性"的形式去访问
import { reactive } from 'vue'
const refVar = reactive({
message : "Hello"
})
// 改变reactive函数产生的响应式变量
const setMessage = ()=>{
refVar.message = "World"
}
- 使用ref【推荐使用】:直接传入规范类型[例如String,Number之类]的数据，使用变量时通过"变量名.value"来访问
import { ref } from 'vue'
const count = ref(0)
const setCount = ()=>{
count.value++
}
注：
- ref与reactive相同点：以函数调用的方式产生响应式数据
- ref与reactive不同点：reactive不能处理简单类型的数据，ref必须通过.value的方式访问
- ref更小巧灵活
4.计算属性computerd:需要根据改变做出计算的部分
import { computed } from 'vue'
const computeRes = computed(()=>{
//逻辑
})
注：
- computed的作用是用于计算属性值。它可以根据依赖的数据变化自动更新计算结果，并将结果缓存起来，避免重复计算。computed属性具有响应式特性，当依赖的数据发生变化时，会自动触发重新计算。
- 计算属性中不应该有副作用如异步请求或修改DOM
- 计算属性应该是只读的
5.监听函数
//监听单个响应式变量
import { watch } from 'vue'
const count = ref(0)
watch(count,(newVal,oldVal)=>{
console.log("新的值",newVal,"旧的值",oldVal)
})
// 监听多个响应式变量
const var1 = ref("Hello")
const var2 = ref("World")
watch([var1,var2],([newVar1,newVar2],[oldVar1,oldVar2])=>{
// 进行处理
})
6.生命周期函数(以onMounted为例)
// 生命周期函数 以onMounted为例
import { onMounted } from 'vue'
onMounted(()=>{
console.log("onMounted")
})
注：
- 在Vue3中是没有beforeCreate和created的，两者使用setup代替
- 生命周期函数可以调用多次，在时机成熟时依次执行
二、进阶操作
1.父组件向子组件传递消息
步骤：
- 在父组件模板中子组件标签中传入要传递的内容，格式'变量名="变量内容"'
- 在子组件中使用宏函数defineProps({})接收，{}中写入要接受变量名和类型，格式“变量名:类型”
- 在子组件中直接使用变量名来调用父组件向子组件传来的属性
传递静态变量(代码截图+效果截图)
传递响应式变量(代码截图+效果截图)红色为与静态变量的区别
2.子组件向父组件传递消息
步骤
- 父组件绑定事件
- 子组件使用defineEmit 传入数组(包含所有触发事件)
- 子组件在发送函数中调用emit传入父组件绑定的时间名和消息
红色框为重点部分
3.获取DOM对象或组件
思路:
- 调用ref生成一个ref对象
- 通过ref标识绑定ref对象到标签
1>获取DOM元素
2>获取组件对象/使用组件对象中的变量或方法
- 获取组件对象
- 获取组件对象中的变量或方法:在子组件中使用宏函数defineExpose暴露出变量或方法
父组件
子组件
效果
注:
- 获取模板引用的时机为组件挂载完毕
- 父组件想使用子组件中的变量和方法要显式的暴露内部的属性和方法
4.跨层传递数据
1>跨层传递普通数据
步骤:
- 顶层组件使用provide函数提供数据
- 底层组件使用inject函数接收函数返回值
2>跨层传递响应式数据/方法
步骤:
- 顶层组件使用provide函数提供ref对象
- 底层组件接收inject函数的返回值
注:
- provide和inject实现了相对下的顶层和底层的跨层通信
- 跨层传递响应式变量或方法时，在provide的第二个参数中传入，底层直接使用同名函数
- 底层组件要通知顶层组件做修改可以通过顶层向底层传递方法，底层组件调用方法改变顶层属性
- 顶层和底层是相对关系，一棵树中存在多个顶层和底层关系
