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

ref是什么?

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

{{nameRef}} -- {{state.name}}

// 获取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标签是这种写法:

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

父组件: App.vue