Dependency injection
Dependency injection is when an ancestor component passes data to a descendant component, Use provide() and Inject () functions, both of which can only be used in setup() functions. Use provide() in ancestor components to pass down data and inject() in descendant components to retrieve data passed from the upper layer
// Parent component <template> <div class="hello"> <h1> Parent component </h1> <son></son> <button @click="colorRef='red'"> red </button> <button @click="colorRef='yellow'"> yellow </button> <button @click="colorRef='blue' > 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> <div class="son"> <h1> Child </h1> <grandson></grandson> </div> </template> import grandson from './grandson.vue' export default { setup(){ }, components: Grandson </script> <div class="grandson"> <h1 :style="{color:color}"> grandson </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>Copy the codeIi. Template Refs
The ref() function can also refer to an element or component step on the page: Create a ref() object in setup() and return it. Add the ref attribute to the element on the page and set the value of the ref attribute to be the same as the name of the ref object
//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() hRef = ref(null); Const comRef = ref(null); // onMounted()=>{console.log(href. value) //DOM object console.log(comref.value) //DOM object hRef.value.style.color = 'red' comRef.value.onChange(); // Parent component calls child component methods}) 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>Copy the codeThird, the responsive system tool set
1, isRef
Checks if a value is a ref object.
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
}
},
}
Copy the code2, isReactive
Check whether an object is a reactive proxy created by 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
}
},
}
Copy the code3, isReadonly
Checks whether an object is a read-only proxy created by 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
}
},
}
Copy the code4, isProxy
Check whether an object is a proxy created by reactive or readonly methods.
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
}
},
}
Copy the code5, unref
If the argument is a ref, return its value, otherwise return the argument itself. It’s val = isRef(val), right? Val. value: syntax sugar for val. Note: unref is all lowercase
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
}
},
}
Copy the code6, toRef
Use to create a ref for a reactive object’s properties. This REF can be passed and it can remain responsive, it can be passed.
< the template > < div > < p > obj: {{obj. Num}} < / p > < p > objFlag: {{objFlag}}</p> < button@click ="onChange"> </div> </template> <script> import {reactive,toRef} from 'vue' Export default {setup(){let obj = reactive({age:5, num:1}); 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>Copy the code7, toRefs
It is used to transform a Reactive object into a normal object, but each property of the normal object is a REF, and this REF has a reactive form that can be passed.
< the template > < div > < p > obj: {{obj. Name}} < / p > < p > obj: {{obj. Num}} < / p > < p > objFlag: {{objFlag}}</p> < button@click ="onChange"> </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>Copy the codeWelcome to pay attention to the public account (web learning bar), learning progress together:
