Provide,Inject, Inject

The basic use

<! DOCTYPEhtml>
<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>
  <! 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: ` 
        `
  });

  app.component("child", {
    setup(){
      const { inject } = Vue;
      // name = key, hello = default
      const name = inject('name'.'hello');
      return{
        name
      }
    },
    template: ` 
       

        {{name}}
       
 `
  });
  
  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

The child modifies the data passed by the parent

<! DOCTYPEhtml>
<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>
  <! 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 to ref responsive data
      provide('name',ref('zibo'));
      return{}},template: ` 
        `
  });

  app.component("child", {
    setup(){
      const { inject } = Vue;
      // name = key, hello = default
      const name = inject('name'.'hello');
      function changeName(){
        name.value = "Brother Liu Bei";
      }
      return{
        name, changeName
      }
    },
    template: ` 
       

        {{name}}
       
 `
  });
  
  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

The child component lets the parent modify the data in the parent component

<! DOCTYPEhtml>
<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>
  <! 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 to ref responsive data
      const name = ref('zibo');
      provide('name',name);
      provide('changeName',changeName);
      // Provide a method to modify the data
      function changeName(value){
        name.value = value;
      }
      return{}},template: ` 
        `
  });

  app.component("child", {
    setup(){
      const { inject } = Vue;
      // name = key, hello = default
      const name = inject('name'.'hello');
      const change = inject("changeName");
      function changeName(){
        change("Second brother Guan Yu");
      }
      return{
        name, changeName
      }
    },
    template: ` 
       

        {{name}}
       
 `
  });
  
  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

Disallow a component from modifying data passed by its parent

Set to read-only

<! DOCTYPEhtml>
<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>
  <! 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 to ref responsive data
      const name = ref('zibo');
      provide('name',readonly(name));
      provide('changeName',changeName);
      // Provide a method to modify the data
      function changeName(value){
        name.value = value;
      }
      return{}},template: ` 
        `
  });

  app.component("child", {
    setup(){
      const { inject } = Vue;
      // name = key, hello = default
      const name = inject('name'.'hello');
      const change = inject("changeName");
      function changeName(){
        change("Second brother Guan Yu");
        name.value = "Third brother Zhang Fei";
      }
      return{
        name, changeName
      }
    },
    template: ` 
       

        {{name}}
       
 `
  });
  
  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

Use ref to get the real DOM node

<! DOCTYPEhtml>
<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>
  <! 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: ` 
       

        hello world! 
       
 `
  });
  
  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results