9. Supplement basic grammar knowledge

Use ref to get the 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 vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    mounted(){
      / / print the DOM
      console.log(this.$refs.hello);
      / / DOM operation
      this.$refs.hello.innerHTML = 
    },
    template: ` 
       
 
        

          hello world! 
        
 
       
 `
  });

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

</html>
Copy the code

The results

Use ref to get a reference to the child 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 vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    mounted(){
      // Prints child components
      console.log(this.$refs.hello);
      // Invoke the child component's methods
      this.$refs.hello.print();
    },
    template: ` 
       
 
         
       
 `
  });

  app.component('common-item', {
    methods: {print(){
        console.log("How to print child components!"); }},template: ` 
       

        hello world! 
       
 `
  });

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

</html>
Copy the code

The results

Dojo.provide and inject

Used to transfer data across multiple layers of components

<! 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 vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    provide: {
      message: "Hello World!"
    },
    template: ` 
       
 
         
       
 `
  });

  app.component('common-item', {
    template: ` 
        `
  });

  app.component('child', {
    template: ` 
        `
  });

  app.component('child-child', {
    inject: ['message'].template: ` 
       

        {{message}}
       
 `
  });

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

</html>
Copy the code

The results

Provide the data inside the data

Provide data is one-time, not bidirectional binding (not dynamically changing)

<! 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 vue</title>
  <! Vue library -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  const app = Vue.createApp({
    data(){
      return{
        message: 'Hello World! '}},provide(){
      return{
        message: this.message
      }
    },
    template: ` 
       
 
         
       
 `
  });

  app.component('common-item', {
    template: ` 
        `
  });

  app.component('child', {
    template: ` 
        `
  });

  app.component('child-child', {
    inject: ['message'].template: ` 
       

        {{message}}
       
 `
  });

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

</html>
Copy the code

The results