定义变量

ref
reactive
toRefs

let preson=reactive({name:'zhangsan',age:19
})//直接解构不是响应式，需要加toRefs
let {name,age}=toRefs(preson)

toRef

let preson=reactive({name:'zhangsan',age:19
})变成响应式
let name=toRef(preson,'name')
console.log(name.value)

ref在组件上使用

ref传递给子组件，可以获取到子组件实例

<!-- 父组件App.vue -->
<template><Person ref="ren"/><button @click="test">测试</button>
</template><script lang="ts" setup name="App">import Person from './components/Person.vue'import {ref} from 'vue'let ren = ref()function test(){console.log(ren.value.name)console.log(ren.value.age)}
</script><!-- 子组件Person.vue中要使用defineExpose暴露内容 -->
<script lang="ts" setup name="Person">import {ref,defineExpose} from 'vue'// 数据let name = ref('张三')let age = ref(18)/****************************//****************************/// 使用defineExpose将组件中的数据交给外部defineExpose({name,age})
</script>

传值

props方式

1.父传子

父组件传递
<template><Child :car="car"/>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import Child from './Child.vue'
let car = ref('宝马')
</script>子组件接收
<template><div class="child">{{ car }}</div>
</template>
<script setup lang="ts">
defineProps(['car'])
</script>

2.子传父

父组件传递
<template><Child :car="car" :sendValue="sendValue"/>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import Child from './Child.vue'
let car = ref('宝马')
function sendValue(value) {car.value=value
}
</script>子组件接收
<template><div class="child">{{ car }}</div><div @click="sendValue('奔驰')">点击</div>
</template>
<script setup lang="ts">
let refValue = defineProps(['car','sendValue'])
console.log(refValue.car,refValue.sendValue)
</script>

自定义事件方式

父组件传递，一个自定义事件@sendValue="sendValue"
<template><Child :car="car" @send-value="sendValue"/>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import Child from './Child.vue'
let car = ref('宝马')
function sendValue(value) {car.value=value
}
</script>子组件接收 defineEmits
让后触发sendValue自定义事件，第二个参数就是传递的值
<template><div class="child">{{ car }}</div><div @click="emit('send-value','奔驰')">点击</div>
</template>
<script setup lang="ts">
let refValue = defineProps(['car'])
let emit = defineEmits(['send-value'])
console.log(refValue.car)
</script>

mitt方式

实现任意通信
打包后包体积很小200byte

import mitt from 'mitt'
const emitter = mitt()绑定
emitter.on('test1',(v)=>{接收值})
emitter.on('test2',(v)=>{接收值})触发
emitter.emit('test1','值')
emitter.emit('test2','值')解绑
onUnMounted的时候去解绑
emitter.off('test1')
emitter.off('test2')

v-model

虽然实际开发部会自己用
当是组件库底层，在大量使用