Vue3相关语法内容，组件传值

1、Vue3相关语法内容

1、赋值语法（ref，reactive）

1.1、ref 、isRef、 shallowRef、triggerRef、customRef 支持所有的类型（原因没有泛型约束）

##### 1、ref
// 简单数据类型 可以直接通过 赋值
type M {name:string;
}
const name = ref<M>('')// 复杂数据类型 可以直接通过 赋值
import type {Ref} from 'vue';
type M {name:string;
}
const name:Ref<M> = ref('屈小康')// 取值
name.value  // 屈小康
name // Object// 为什么？
ref返回值是一个ES6的class的类，里面有一个 .value的属性，所以取值和赋值 都必须通过 .value 固定语法### 2、isRefisRef(name) // 判断定义的内容是否为一个ref定义的内容 返回 true/false.### 3、shallowRef //浅层响应式
const a = ref({name:'a'})
const b = shallowRef('b')// 改变值const handleClick = () =>{a.value.name = 'aa' // 页面展示 aab.value.name = 'bb' // 页面展示 b 页面没有发生改变，但是值已经发生改变 (也就是说没有双向数据绑定)b.value = {name:'bb'   // 页面展示 bb 修改成功 这就是浅层 只绑定到 value属性}}
###	4、triggerRef 强制跟新 shallowRef### 5、customRef 自定义一个reffunction MyRef(value){return customRef((track,trigger)=>{return {get(){track();},set(newVal){value = newVal;trigger();},}})}
const name = customRef('1');
name.value // 1 输出内容## 6、获取 元素 相当于 v2的 this.$refs
<div ref="dom"></div>
// 获取 元素
const dom= ref();  // dom 必须和 ref="dom" 中的 dom 保持一致
// 获取
dom.value 相当于 this.$refs.dom

1.2、 reactive、readonly、shallowReactive （支持引用数据类型，泛型约束）

reactive （target：T） // 源码实例继承与 object。

const stu = reactive({name:'屈小康'
})### 1.1 获取值stu.name // 屈小康
###	 1.2 修改值
stu.name = '张三'
### 1.3  修改值（错误做法）
let obj = {name:'张三'}
stu = obj;
引用数据类型无法进行重新赋值### 2.1 readonly 只读属性
const name = raeadonly({}) // 不可进行操作后续属性（相对情况下，如果你的readonly依赖于reactive，这个时候修改reactive的时候就会变更）### 3.1 shallowReactive 浅层的 只到第一个属性。
const stu= reactive({age:14,person:{sex:'男'}
})
// 只影响到 stu.age

2、to系列（toRef、toRefs、toRaw）

2.1 toRef

用法：毫无卵用的用法（不能说这种用法是错的，只能说没有任何意义）
const stu = {name:"张三"};
const stus =  toRef(stu,'name')
stus.name = '李四'; 值发生了改变，但是页面不会变还是 张三如何发生改变
const stu = reactive({name:"张三"}) // 这样进行 修改就好了
总结：非响应式使用的时候 没有任何作用。只能修改响应式的。

2.2 toRefs

const stu = {name:"1",age:"2"};
const {name,age}  = toRefs(stu);
总结：非响应式使用的时候 没有任何作用。只能修改响应式的。

2.3 toRaw

脱离响应式对象
const stu = {name:“1”,age:“2”};
toRaw(stu) // {name:“1”,age:“2”}

2、组件传值

2.1.1、父—>子基本数据传参 [不是TS版]（defineProps ）

### Father 组件
<template>我是Father<Son :title="title"></Son>
</template>
<script setup>import Son from './b.vue';
import { ref } from 'vue';const title = ref('把这个值传给孩子组件');</script>#### Son 组件<template><div>我是孩子{{ title }}</div>
</template>
<script setup>
import { defineProps } from 'vue';## 简单 用法 不带默认值
defineProps ({title: String,
});## 带默认值
const props = defineProps({title: {type: String,default: '我是默认值'}
})</script>

2.1.2、父—>子事件数据传参 [不是TS版]（defineExpose）（父调用子组件的方法）

###### Fatner
<template>我是Father<Son  ref="son"></Son><button @click="handleClick">点我</button>
</template>
<script setup>import Son from './b.vue';
import { ref } from 'vue';
const son = ref(null);const handleClick = () => {son.value.handleClick();
}</script>###### Son<template><div>我是孩子</div>
</template>
<script setup>
import { defineProps } from 'vue';const handleClick = () => {console.log('我被点击了！！')
}defineExpose({ handleClick })</script>

2.1.3 子—> 父事件传参【不是TS版本】（$emit）

###### Fatner
<template>我是Father<Son  @childEmit="childEmit"></Son>
</template>
<script setup>import Son from './b.vue';
import { ref } from 'vue';const childEmit = (value) => {console.log(value)
}</script>########### Son
<template><div>我是孩子<button @click="handleSend">点我</button></div>
</template>
<script setup>
import { defineProps } from 'vue';const emit = defineEmits(['childEmit']);const handleSend = () => {emit('childEmit', '数据')
}
</script>

2.2.1 基本数据类型传参（TS版本）（withDefaults）

<template>我是Father<Son :title="title"></Son></template>
<script setup lang="ts">import Son from './b.vue';
import { ref } from 'vue';const title = ref<string>()</script><template><div>我是孩子{{ props.title }}</div>
</template>
<script setup lang="ts">import { defineProps } from 'vue';const props = withDefaults(defineProps<{title: string,}>(),{title: '默认值'}
)
</script>