vue3父子通信+ref,toRef,toRefs使用实例

ref是什么?

1. 生成值类型的响应式数据
2. 可用于模板和reactive
3. 通过.value修改值
4. 可以获取DOM元素

<p ref="elemRef">{{nameRef}} -- {{state.name}}</p>

// 获取dom元素

onMounted(()=>{ console.log(elemRef.value); });

toRef是什么?

1. 针对一个响应式对象(reactive封装)的prop属性!!!
2. 创建一个ref, 具有响应式
3. 两者保持引用关系

toRefs是什么?

1. 将响应式对象(reactive封装)转换为普通对象
2. 对象的每个prop属性都是对应的ref
3. 两者保持引用关系

最佳使用方式

1. 用reactive做对象的响应式, 用ref做值类型响应式
2. 需要解构响应式对象使用toRefs(state), 只需要获取单个响应式值类型使用toRef(state, 'xxx');
3. ref的变量命名都用xxRef
4. 合成函数返回响应式对象时, 用toRefs(usexx这种钩子函数);

使用示例:

1. 子组件, script标签是这种写法: <script setup lang="ts">时

2. 子组件, script标签是这种写法: <script>时

父组件: App.vue

<script setup>
import HelloWorld from './components/Test2.vue'
function onSayHello(a) {
  console.log(a)
}
</script>

<template>
  <HelloWorld msg="Vite + Vue" @onSayHello="onSayHello"/>
</template>

<style scoped>
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>