vue3中provide, inject用于父子、祖孙等组件传值场景的使用

最新推荐文章于 2023-11-23 22:24:04 发布

xyphf_和派孔明

最新推荐文章于 2023-11-23 22:24:04 发布

阅读量1.2k

点赞数

分类专栏： vue.js入门文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/xyphf/article/details/129464174

版权

vue.js入门专栏收录该内容

93 篇文章 6 订阅

订阅专栏

此前我们知道父子之间传值用的比较多的是props方法，但是传的层级多了有些不方便，可以使用vuex,我们今天再聊一只父子甚至祖孙组件之间传值的方法。

provide可以用于向子组件、孙组件传递值或方法

inject 用于获取子组件的值或方法

readonly方法表示该数据只读不可修改

ref 处理基础类型的数据相应

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>provide, inject用于父子、祖孙等组件传值的使用</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  // provide, inject
  const app = Vue.createApp({
    setup() {
      // provide 表示可以向子组件甚至孙组件传值
      // readonly 表示只读 不可修改
      const { provide, ref, readonly } = Vue;
      const name = ref('zhangsan');
      provide('name', name);
      // 前面是key 后面是value 如果value包裹了readonly方法表示不可修改
      // provide('name', readonly(name));
      provide('changeName', (value) => { // 修改参数的方法
        name.value = value;
      });
      return { }
    },
    template: `
      <div>
        <child />
      </div>
    `,
  });  
  app.component('child',{
    setup() {
      // 接收父组件的函数
      const { inject } = Vue;
      // 获取父组件name的数据 inject第一个参数表示获取的参数key,第二表示如果获取不到值的默认值
      const name = inject('name', 'wangwu');
      const changeName = inject('changeName');
      const handleClick = () => {
        changeName('lisi') // 调用父组件的方法改变值
      }
      return { name, handleClick }
    },
    template: '<div @click="handleClick">{{name}}</div>'
  })

  const vm = app.mount('#root');
</script>
</html>