【Vue3 从入门到实战进阶式掌握完整知识体系】037-Composition API：Provide,Inject,模版Ref的用法

不念不忘少年蓝@ 2023-10-03 09:48 10阅读 0赞

### 文章目录 ###

*   *  8、Provide,Inject,模版Ref的用法
     *   *  基本使用
         *  运行结果
         *  子组件修改父组件传递过来的数据
         *  运行结果
         *  子组件让父组件修改父组件里面的数据
         *  运行结果
         *  禁止自组件对父组件传递过来的数据进行修改
         *  运行结果
         *  使用ref获取真实DOM节点
         *  运行结果

## 8、Provide,Inject,模版Ref的用法 ##

### 基本使用 ###

### 运行结果 ###

![image-20210616210100121][]

### 子组件修改父组件传递过来的数据 ###

<!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>
      
      <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;
          // 这里将值改为 ref 响应式数据
          provide('name',ref('zibo'));
          return{
           }
        },
        template: `
          <child />
        `
      });
    
      app.component("child", {
         
        setup(){
         
          const {
          inject } = Vue;
          // name 为 key， hello 为默认值（取不到取默认值）
          const name = inject('name', 'hello');
          function changeName(){
         
            name.value = "大哥刘备";
          }
          return{
         
            name, changeName
          }
        },
        template: `
          <div @click="changeName">{
          {name}}</div>
        `
      });
      
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210616211643062][]

### 子组件让父组件修改父组件里面的数据 ###

<!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>
      
      <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;
          // 这里将值改为 ref 响应式数据
          const name = ref('zibo');
          provide('name',name);
          provide('changeName',changeName);
          // 提供一个修改数据的方法
          function changeName(value){
         
            name.value = value;
          }
          return{
           }
        },
        template: `
          <child />
        `
      });
    
      app.component("child", {
         
        setup(){
         
          const {
          inject } = Vue;
          // name 为 key， hello 为默认值（取不到取默认值）
          const name = inject('name', 'hello');
          const change = inject("changeName");
          function changeName(){
         
            change("二哥关羽");
          }
          return{
         
            name, changeName
          }
        },
        template: `
          <div @click="changeName">{
          {name}}</div>
        `
      });
      
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210616212117007][]

### 禁止自组件对父组件传递过来的数据进行修改 ###

> 设置为只读

<!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>
      
      <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;
          // 这里将值改为 ref 响应式数据
          const name = ref('zibo');
          provide('name',readonly(name));
          provide('changeName',changeName);
          // 提供一个修改数据的方法
          function changeName(value){
         
            name.value = value;
          }
          return{
           }
        },
        template: `
          <child />
        `
      });
    
      app.component("child", {
         
        setup(){
         
          const {
          inject } = Vue;
          // name 为 key， hello 为默认值（取不到取默认值）
          const name = inject('name', 'hello');
          const change = inject("changeName");
          function changeName(){
         
            change("二哥关羽");
            name.value = "三哥张飞";
          }
          return{
         
            name, changeName
          }
        },
        template: `
          <div @click="changeName">{
          {name}}</div>
        `
      });
      
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210616212438661][]

### 使用ref获取真实DOM节点 ###

### 运行结果 ###

![image-20210616213014800][]

[image-20210616210100121]: https://img-blog.csdnimg.cn/img_convert/43b6cb64da9c285716c148b603c5f72d.png
[image-20210616211643062]: https://img-blog.csdnimg.cn/img_convert/5e5914bf923e068218cfff0808895b6b.png
[image-20210616212117007]: https://img-blog.csdnimg.cn/img_convert/637a9ec89bdf6314615d3ffb3de4cb27.png
[image-20210616212438661]: https://img-blog.csdnimg.cn/img_convert/e6a79d9a74f14981a4af29df244abeb6.png
[image-20210616213014800]: https://img-blog.csdnimg.cn/img_convert/8e561038db5dacf7febe9169c7a180f1.png