一、依赖注入
依赖注入就是祖先组件向后代组件传递数据，使用provide()和inject()函数来实现
这两个函数只能在setup()函数中使用
在祖先组件中使用provide()函数向下传递数据
在后代组件中使用inject()函数获取上层传递传递过来的数据
//父组件<template> <div class="hello"> <h1>父组件</h1> <son></son> <button @click="colorRef='red'">红</button> <button @click="colorRef='yellow'">黄</button> <button @click="colorRef='blue'">蓝</button> </div></template><script> import { provide,ref} from 'vue' import son from './son.vue' export default { setup(){ // 向后代传数据 不会响应式更新 provide('color','yellow'); // 传递响应式的数据 let colorRef = ref('red') provide('colorRef',colorRef); return{ colorRef } }, components: { son } }</script>//子组件<template> <div class="son"> <h1>子组件</h1> <grandson></grandson> </div></template><script> import grandson from './grandson.vue' export default { setup(){ }, components: { grandson } }</script>//孙子组件<template> <div class="grandson"> <h1 :style="{color:color}">孙组件1</h1> <h1 :style="{color:colorRef}">孙组件1</h1> </div></template><script> import { inject} from 'vue' export default { setup(){ const color = inject('color'); const colorRef = inject('colorRef'); return { color, colorRef } } }</script>二、模板Refs
通过ref()函数还可以引用页面上的元素或组件
步骤：
1、在setup()中创建一个ref()对象并返回
2、在页面上为元素添加ref属性，并设置属性值与创建的ref对象的名称相同
3、当前页面渲染完成后（onMounted），可以通过该ref对象获取到页面中对应的dom元素
//refs.vue<template> <div> <h1 ref="hRef">这是一段文字，需要获取</h1> <hr> <compRefs ref="comRef" :onChanges="onChanges"></compRefs> </div></template><script> import {ref,onMounted} from 'vue' import compRefs from './compRef.vue' export default { setup(){ // 创建一个值为null的ref对象并返回 const hRef = ref(null); // 获取组件 const comRef = ref(null); // 在页面渲染完成后 onMounted(()=>{ console.log(hRef.value) //DOM对象 console.log(comRef.value) //DOM对象 hRef.value.style.color = 'red' comRef.value.onChange(); //父组件调用子组件方法 }) let onChanges = ()=>{ hRef.value.innerHTML = ' hello' } return{ hRef, comRef, onChanges } }, components:{ compRefs } }</script>//compRefs.vue<template> <div> <p>{{msg}}</p> <button @click="childMethod">点击</button> </div></template><script> import {ref,onMounted} from 'vue' export default { props:{ onChanges: Function }, setup(props){ const msg = ref('welcome'); let onChange = ()=>{ msg.value += ' hello' } let childMethod = ()=>{ console.log(props) props.onChanges(); //子组件调用父组件方法 } onMounted(()=>{ }) return{ msg, onChange, childMethod } } }</script>三、响应式系统工具集
1、isRef
检查一个值是否为一个 ref 对象。
import{ref,reactive,isRef} from 'vue'export default { setup(){ let num = ref(5); let single = 5; let obj = reactive({ age:5 }) let numFlag = isRef(num); //true let singleFlag = isRef(single); //false let objFlag = isRef(obj); //false return{ numFlag, singleFlag, objFlag } },}2、isReactive
检查一个对象是否是由 reactive 创建的响应式代理。
import{ref,reactive,isReactive} from 'vue'export default { setup(){ let num = ref(5); let single = {num:5}; let obj = reactive({ age:5 }) let numFlag = isReactive(num); //false let singleFlag = isReactive(single); //false let objFlag = isReactive(obj); //true return{ numFlag, singleFlag, objFlag } },}3、isReadonly
检查一个对象是否是由 readonly 创建的只读代理。
import {ref,reactive,isReadonly,readonly} from 'vue'export default { setup(){ let num = ref(5); let single = readonly({ name:'tom' }); let obj = reactive({ age:5 }) let numFlag = isReadonly(num); //false let singleFlag = isReadonly(single); //true let objFlag = isReadonly(obj); //false return{ numFlag, singleFlag, objFlag } },}4、isProxy
检查一个对象是否是由 reactive 还是 readonly 方法创建的代理。
import {ref,reactive,isProxy,readonly} from'vue'export default { setup(){ let num = ref(5); let single = readonly({ name:'tom' }); let obj = reactive({ age:5 }) let numFlag = isProxy(num); //false let singleFlag = isProxy(single); //true let objFlag = isProxy(obj); //true return{ numFlag, singleFlag, objFlag } },}5、unref
如果参数是一个 ref 则返回它的 value，否则返回参数本身。它是 val = isRef(val) ? val.value : val 的语法糖。注意：unref都是小写的
import {ref,reactive,unref,readonly} from 'vue'export default { setup(){ let num = ref(5); let single = readonly({ name:'tom' }); let obj = reactive({ age:5 }) let numFlag = unref(num); //5 let singleFlag = unref(single); //{name:'tom'} let objFlag = unref(obj); //{age:5} return{ numFlag, singleFlag, objFlag } },}6、toRef
用来为一个 reactive 对象的属性创建一个 ref。这个 ref 可以被传递并且能够保持响应性，可以被传递。
<template> <div> <p>obj：{{obj.num}}</p> <p>objFlag：{{objFlag}}</p> <button @click="onChange">修改num</button> </div></template><script> import {reactive,toRef} from 'vue' export default { setup(){ let obj = reactive({ age:5, num:1 }) //只能是reactive对象中的一个属性 let objFlag = toRef(obj,'num'); const onChange = ()=>{ objFlag.value = 10; console.log(obj.num) //10 console.log(objFlag.value) //10 } return{ objFlag, obj, onChange } }, }</script>7、toRefs
用来将reactive对象转换为一个普通对象，但该普通对象的每个 属性都是一个 ref ，并且这个ref具有响应式，可以被传递。
<template> <div> <p>obj：{{obj.name}}</p> <p>obj：{{obj.num}}</p> <p>objFlag：{{objFlag}}</p> <button @click="onChange">修改num</button> </div></template><script> import {reactive,toRefs} from 'vue' export default { setup(){ let obj = reactive({ name:'tom', num:1 }) let objFlag = toRefs(obj); const onChange = ()=>{ objFlag.name.value = 'Json'; objFlag.num.value = 10; console.log(obj.num) //10 console.log(obj.name) //Json } return{ objFlag, obj, onChange } }, }</script>欢迎关注公众号（web学习吧），一起学习进步: