vue3 setup组合式api及父子传值

1. 响应式核心

 ref 定义响应是值类型方法
 reactive 引用类型
 computed 从现有数据计算新的数据
 watch监听数据的变化
 watchEffect监听副作用（只要被这个方法引用的数据，发送变化都会触发）
 readyonly只读常用与优化

2. 生命周期

beforeCreate 创建前
created  创建后
beforeMount 挂载前 
mounted 挂载后
beforeUpdate 更新前
updated 更新后
beforeUnmount 卸载前 
unmounted 卸载后

3. 依赖注入

在组合式 API 中使用 provide/inject，两个只能在 setup 期间调用，使用之前，必须从 vue 显示导

入 provide/inject 方法。

provide 函数接收两个参数：

provide( name,value )

name：定义提供 property 的 name 。

value ：property 的值。

使用时：
import { provide } from "vue"
 export default {
   setup(){
     provide('info',"值")
   }
 }
inject 函数有两个参数：
inject(name,default)
name：接收 provide 提供的属性名。
default：设置默认值，可以不写，是可选参数。

使用时：
import { inject } from "vue"
 export default {
   setup(){
     inject('info',"设置默认值")
   }
 }

完整实例1：provide/inject实例
//父组件代码

//子组件 代码

 

4.组件相关

defineProps   定义props
 const props = defineProps({
         // 长度
         "maxLength":{
             type:[Number,String],
             default:0,
          },
         // 默认值
         "modelValue":{
             type:String,
             default:"",
          },
    })

defineEmit
cosnt emits = defineEmit(["update:"update:modelValue"])
emits("update:modelValue",content.value)

5.父子传值和子父传值

父传子：

第一步：Father.vue

第二步：Sun.vue

子传父：

第一步：Sun.vue

第二步：Father.vue：