Vue Inject & Provided

介绍

在Vue中我们可以使用Inject和Provided来完成爷孙组件的直接通信

效果

动态效果可拷贝下面代码实现

在这里插入图片描述

代码

我们在爷组件使用Provided将数据提供出去，在孙组件中使用Inject接收数据使用

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>lesson 41title>
  <script src="https://unpkg.com/vue@next">script>
head>
<body>
  <div id="root">div>
body>
<script>
  // provide, inject
  // dom ref
  // const app = Vue.createApp({
  //   setup() {
  //     const { provide, ref, readonly } = Vue;
  //     const name = ref('dell');
  //     provide('name', readonly(name));
  //     provide('changeName', (value) => {
  //       name.value = value;
  //     });
  //     return { }
  //   },
  //   template: `
  //     
  //       
  //     
  //   `,
  // });

  // app.component('child', {
  //   setup() {
  //     const { inject } = Vue;
  //     const name = inject('name');
  //     const changeName = inject('changeName');
  //     const handleClick = () => {
  //       changeName('lee');
  //     }
  //     return { name, handleClick }
  //   },
  //   template: '{{name}}
'
  // })

  // CompositionAPI 的语法下，获取真实的 DOM 元素节点
  const app = Vue.createApp({
    setup() {
      const { ref, onMounted } = Vue;
      const hello = ref(null);
      onMounted(() => {
        console.log(hello.value);
      })
      return { hello }
    },
    template: `
      
        hello world
      
    `,
  });
  
  const vm = app.mount('#root');
script>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

相关阅读:
数据治理容易走进哪些误区？
CloudCompare&PCL ICP配准（点到面）
Java学习
近来的一些小感悟
海康Visionmaster-环境配置：运行出现 Vm.Core.Solu tion 报错的解决方法
Java中的并发包java.util.concurrent提供了哪些并发工具类
Android自定义公共引入库(多个项目引入同一自定义框架类库)
Acwing 907. 区间覆盖
深度学习进度显示神器：tqdm详解
【新版】系统架构设计师 - 案例分析 - 架构设计＜SOA与微服务＞

原文地址：https://blog.csdn.net/weixin_41405524/article/details/126354600