【Vue3 从入门到实战进阶式掌握完整知识体系】018-探索组件的理念：基础语法知识点补充

左手的ㄟ右手 2023-10-03 09:36 1阅读 0赞

### 文章目录 ###

*   *  9、基础语法知识点补充
     *   *  使用ref获取dom节点
         *  运行结果
         *  使用ref获取子组件的引用
         *  运行结果
         *  provide和inject
         *  运行结果
         *  provide里面的数据是data里面的数据
         *  运行结果

## 9、基础语法知识点补充 ##

### 使用ref获取dom节点 ###

<!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 vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        mounted(){
         
          // 打印 DOM
          console.log(this.$refs.hello);
          // 操作 DOM
          this.$refs.hello.innerHTML = "<button>哈哈哈</button>"
        },
        template: `
            <div>
              <div ref="hello">
                hello world!
              </div>
            </div>
        `
      });
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210613191137677.png][]

### 使用ref获取子组件的引用 ###

<!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 vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        mounted(){
         
          // 打印 子组件
          console.log(this.$refs.hello);
          // 调用子组件的方法
          this.$refs.hello.print();
        },
        template: `
            <div>
              <common-item ref="hello" />
            </div>
        `
      });
    
      app.component('common-item', {
         
        methods:{
         
          print(){
         
            console.log("子组件的打印方法！");
          }
        },
        template: `
          <div>hello world!</div>
        `
      });
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210613191645529.png][]

### provide和inject ###

> 用于数据在多层组件中传递

<!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 vue</title>
      
      <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: `
            <div>
              <common-item />
            </div>
        `
      });
    
      app.component('common-item', {
         
        template: `
        <child />
        `
      });
    
      app.component('child', {
         
        template: `
        <child-child />
        `
      });
    
      app.component('child-child', {
         
        inject: ['message'],
        template: `
        <div>{
          {message}}</div>
        `
      });
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210613192612379.png][]

### provide里面的数据是data里面的数据 ###

> provide提供数据是一次性的，不是双向绑定的（不是动态变化的）

<!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 vue</title>
      
      <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: `
            <div>
              <common-item />
            </div>
        `
      });
    
      app.component('common-item', {
         
        template: `
        <child />
        `
      });
    
      app.component('child', {
         
        template: `
        <child-child />
        `
      });
    
      app.component('child-child', {
         
        inject: ['message'],
        template: `
        <div>{
          {message}}</div>
        `
      });
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210613192844634.png][]

[image-20210613191137677.png]: https://img-blog.csdnimg.cn/img_convert/4c2fda7efafb7af67b3c5486f9be36b9.png
[image-20210613191645529.png]: https://img-blog.csdnimg.cn/img_convert/6473c9638fb19d7e942da1c56f117649.png
[image-20210613192612379.png]: https://img-blog.csdnimg.cn/img_convert/76946550ca93cdc17594fb3b1e969985.png
[image-20210613192844634.png]: https://img-blog.csdnimg.cn/img_convert/7024965f8a8592ad357a72cd9a71e036.png