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

訾博ZiBo

发布于 2025-01-06 14:19:27

5900

代码可运行

文章被收录于专栏：全栈开发工程师全栈开发工程师

运行总次数：0

代码可运行

8、Provide,Inject,模版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</title>
  <!-- 引入Vue库 -->
  <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 为 key， hello 为默认值（取不到取默认值）
      const name = inject('name', 'hello');
      return{
        name
      }
    },
    template: `
      <div>{{name}}</div>
    `
  });
  
  const vm = app.mount('#root');
</script>

</html>

运行结果

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

<!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>
  <!-- 引入Vue库 -->
  <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>

运行结果

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

<!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>
  <!-- 引入Vue库 -->
  <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>

运行结果

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

设置为只读

<!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>
  <!-- 引入Vue库 -->
  <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>

运行结果

使用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</title>
  <!-- 引入Vue库 -->
  <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>