[Vue3 from entry to actual combat advanced to master the complete knowledge system] 037-Composition API: Provide, Inject, the usage of template Ref

[Vue3 from entry to actual combat advanced to master the complete knowledge system] 037-Composition API: Provide, Inject, the usage of template Ref

8. The usage of Provide, Inject, and template Ref

Basic use

<!DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > hello </title > <!-- Introducing the Vue library--> < script src = "https://unpkg.com/vue@next" > </script > </head > < body > < div id = "root" > </div > </body > < script > const app = Vue.createApp({ setup () { const {provide} = Vue; provide( 'name' , 'zibo' ); return {} }, template :` <child/> ` }); app.component( "child" , { setup () { const {inject} = Vue; //name is the key, hello is the default value (the default value is not available) const name = inject( 'name' , 'hello' ); return { name } }, template : ` <div>{{name}}</div> ` }); const vm = app.mount( '#root' ); </ script > </html > Copy code

operation result

The child component modifies the data passed by the parent component

<!DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > hello </title > <!-- Introducing the Vue library--> < script src = "https://unpkg.com/vue@next" > </script > </head > < body > < div id = "root" > </div > </body > < script > const app = Vue.createApp({ setup () { const {provide,ref} = Vue; //Change the value here to ref responsive data provide( 'name' ,ref( 'zibo' )); return {} }, template :` <child/> ` }); app.component( "child" , { setup () { const {inject} = Vue; //name is the key, hello is the default value (the default value is not available) const name = inject( 'name' , 'hello' ); function changeName () { name.value = "Big Brother Liu Bei" ; } return { name, changeName } }, template :` <div @click="changeName">{{name}}</div> ` }); const vm = app.mount( '#root' ); </script > </html > Copy code

operation result

The child component allows the parent component to modify the data in the parent component

<!DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > hello </title > <!-- Introducing the Vue library--> < script src = "https://unpkg.com/vue@next" > </script > </head > < body > < div id = "root" > </div > </body > < script > const app = Vue.createApp({ setup () { const {provide,ref} = Vue; //Change the value here to ref responsive data const name = ref( 'zibo' ); provide( 'name' ,name); provide( 'changeName' ,changeName); //Provide a method to modify data function changeName ( value ) { name.value = value; } return {} }, template : ` <child/> ` }); app.component( "child" , { setup () { const {inject} = Vue; //name is the key, hello is the default value (the default value is not available) const name = inject( 'name' , 'hello' ); const change = inject( "changeName" ) ; function changeName () { change( "2.Brother Guan Yu" ); } return { name, changeName } }, template :` <div @click="changeName">{{name}}</div> ` }); const vm = app.mount( '#root' ); </ script > </html > Copy code

operation result

It is forbidden from the component to modify the data passed by the parent component

Set to read-only

<!DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > hello </title > <!-- Introducing the Vue library--> < script src = "https://unpkg.com/vue@next" > </script > </head > < body > < div id = "root" > </div > </body > < script > const app = Vue.createApp({ setup () { const {provide, ref, readonly} = Vue; //Change the value here to ref responsive data const name = ref( 'zibo' ); provide( 'name' ,readonly(name)); provide( 'changeName' ,changeName); //Provide a method to modify data function changeName ( value ) { name.value = value; } return {} }, template :` <child/> ` }); app.component( "child" , { setup () { const {inject} = Vue; //name is the key, hello is the default value (the default value is not available) const name = inject( 'name' , 'hello' ); const change = inject( "changeName" ) ; function changeName () { change( "2.Brother Guan Yu" ); name.value = " 3.Brother Zhang Fei" ; } return { name, changeName } }, template :` <div @click="changeName">{{name}}</div> ` }); const vm = app.mount( '#root' ); </ script > </html > Copy code

operation result

Use ref to get the real DOM node

<!DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > hello </title > <!-- Introducing the Vue library--> < script src = "https://unpkg.com/vue@next" > </script > </head > < body > < div id = "root" > </div > </body > < script > const app = Vue.createApp({ setup () { const {onMounted, ref} = Vue; const hello = ref( null ); onMounted( () => { console .log(hello.value); }); return {hello} }, template : ` <div ref="hello">hello world!</div> ` }); const vm = app.mount( '#root' ); </ script > </html > Copy code

operation result