【Vue 从入门到实战进阶式掌握完整知识体系】07

2025-07-26 09:33:56

【Vue 从入门到实战进阶式掌握完整知识体系】07 8、Provide,Inject,模版Ref的用法基本使用代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

【Vue 从入门到实战进阶式掌握完整知识体系】07

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

基本使用

代码语言：javascript代码运行次数：0运行复制

<!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="@next"></script>
</head>

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

<script>

  ct app = ({
    setup(){
      ct { provide } = Vue;
      provide('name','zibo');
      return{  }
    },
    template: `
      <child />
    `
  });

  appponent("child", {
    setup(){
      ct { inject } = Vue;
      // name 为 key， hello 为默认值（取不到取默认值）
      ct name = inject('name', 'hello');
      return{
        name
      }
    },
    template: `
      <div>{{name}}</div>
    `
  });
  
  ct vm = ('#root');
</script>

</html>

运行结果

image-20210616210100121

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

代码语言：javascript代码运行次数：0运行复制

<!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="@next"></script>
</head>

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

<script>

  ct app = ({
    setup(){
      ct { provide,ref } = Vue;
      // 这里将值改为 ref 响应式数据
      provide('name',ref('zibo'));
      return{  }
    },
    template: `
      <child />
    `
  });

  appponent("child", {
    setup(){
      ct { inject } = Vue;
      // name 为 key， hello 为默认值（取不到取默认值）
      ct name = inject('name', 'hello');
      function changeame(){
        name.value = "大哥刘备";
      }
      return{
        name, changeame
      }
    },
    template: `
      <div @click="changeame">{{name}}</div>
    `
  });
  
  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061621164062

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

代码语言：javascript代码运行次数：0运行复制

<!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="@next"></script>
</head>

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

<script>

  ct app = ({
    setup(){
      ct { provide,ref } = Vue;
      // 这里将值改为 ref 响应式数据
      ct name = ref('zibo');
      provide('name',name);
      provide('changeame',changeame);
      // 提供一个修改数据的方法
      function changeame(value){
        name.value = value;
      }
      return{  }
    },
    template: `
      <child />
    `
  });

  appponent("child", {
    setup(){
      ct { inject } = Vue;
      // name 为 key， hello 为默认值（取不到取默认值）
      ct name = inject('name', 'hello');
      ct change = inject("changeame");
      function changeame(){
        change("二哥关羽");
      }
      return{
        name, changeame
      }
    },
    template: `
      <div @click="changeame">{{name}}</div>
    `
  });
  
  ct vm = ('#root');
</script>

</html>

运行结果

image-20210616212117007

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

设置为只读

代码语言：javascript代码运行次数：0运行复制

<!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="@next"></script>
</head>

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

<script>

  ct app = ({
    setup(){
      ct { provide, ref, readonly } = Vue;
      // 这里将值改为 ref 响应式数据
      ct name = ref('zibo');
      provide('name',readonly(name));
      provide('changeame',changeame);
      // 提供一个修改数据的方法
      function changeame(value){
        name.value = value;
      }
      return{  }
    },
    template: `
      <child />
    `
  });

  appponent("child", {
    setup(){
      ct { inject } = Vue;
      // name 为 key， hello 为默认值（取不到取默认值）
      ct name = inject('name', 'hello');
      ct change = inject("changeame");
      function changeame(){
        change("二哥关羽");
        name.value = "三哥张飞";
      }
      return{
        name, changeame
      }
    },
    template: `
      <div @click="changeame">{{name}}</div>
    `
  });
  
  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061621248661

使用ref获取真实DOM节点

代码语言：javascript代码运行次数：0运行复制

<!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="@next"></script>
</head>

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

<script>

  ct app = ({
    setup(){
      ct { onMounted, ref } = Vue;
      ct hello = ref(null);

      onMounted(() => {
        cole.log(hello.value);
      });

      return{ hello }
    },
    template: `
      <div ref="hello">hello world!</div>
    `
  });
  
  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061621014800本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent 删除vue入门apicompositionref

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1199965.html

推荐阅读

留言与评论（共有 18 条评论）

本站网友姜黄的功效与作用	30分钟前发表
'zibo'); return{ } }
本站网友 000959首钢股份	2分钟前发表
如有侵权请联系 cloudcommunity@tencent 删除前往查看vue入门apicompositionref
本站网友什么是优先股制度	28分钟前发表
changeame); // 提供一个修改数据的方法 function changeame(value){ name.value = value; } return{ } }
本站网友双龙租房	24分钟前发表
initial-scale=1.0"> <title>hello</title> <!-- 引入Vue库 --> <script src="@next"></script> </head> <body> <div id="root"></div> </body> <script> ct app = ({ setup(){ ct { provide
本站网友新生儿发热	14分钟前发表
hello 为默认值（取不到取默认值） ct name = inject('name'
本站网友债券投资入门	23分钟前发表
如有侵权请联系 cloudcommunity@tencent 删除前往查看vue入门apicompositionref
本站网友银川美食	1分钟前发表
` <child /> ` }); appponent("child"
本站网友汉沽房屋出租	16分钟前发表
ref } = Vue; ct hello = ref(null); onMounted(() => { cole.log(hello.value); }); return{ hello } }
本站网友湖北省政府秘书长	27分钟前发表
'hello'); function changeame(){ name.value = "大哥刘备"; } return{ name
本站网友周缙	8分钟前发表
initial-scale=1.0"> <title>hello</title> <!-- 引入Vue库 --> <script src="@next"></script> </head> <body> <div id="root"></div> </body> <script> ct app = ({ setup(){ ct { provide
本站网友虫部落快搜	15分钟前发表
readonly(name)); provide('changeame'
本站网友郑多燕减肥前后	1分钟前发表
changeame } }
本站网友定边新闻	19分钟前发表
` <child /> ` }); appponent("child"
本站网友狗瘟的治疗	6分钟前发表
template
本站网友廖镇汉	22分钟前发表
` <child /> ` }); appponent("child"
本站网友防城港酒店	8分钟前发表
模版Ref的用法基本使用代码语言：javascript代码运行次数：0运行复制<!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
本站网友舒泰清	25分钟前发表
'zibo'); return{ } }

【Vue 从入门到实战进阶式掌握完整知识体系】07