vue学习,使用provide/inject通信

这篇具有很好参考价值的文章主要介绍了vue学习,使用provide/inject通信。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

提示:组件的provide,可以被其内所有层级的组件,通过inject引用


前言

需求:使用provide/inject通信

一、通信组件

1、AA.vue

<template>
  <div class="test">
    <p>1级 provid</p>
    <p><BB /></p>
  </div>
</template>

<script>
import BB from './BB'
export default {
  name: 'AA',
  components:{BB},
  data () {
    return {
      title:'---测试provid和inject通讯',
      name:'张三'
    }
  },
  provide(){
    return {
      title:this.title,
      changeName(name){
        this.name = name;
        console.log(this.name)
      },
    }
  },
  created(){
    console.log(this.name,'1级')
  }
}
</script>

2、BB.vue

<template>
  <div class="test">
    <p>2级 inject  {{ title }}</p>
    <p><CC /></p>
  </div>
</template>

<script>
import CC from './CC'
export default {
  name: 'BB',
  components:{CC},
  inject:{
    title:{
      type:String,
      default:''
    },
    changeName:{
      type:Function,
      default:function(name){}
    }
  },
  data () {
    return {
    }
  },
  created(){
    this.changeName('李四')
  }
}
</script>

3、CC.vue

<template>
  <div class="test">
    <p>3级 inject  {{ title }}</p>
    <p><DD/></p>
  </div>
</template>

<script>
import DD from './DD'
export default {
  name: 'CC',
  components:{DD},
  inject:{
    title:{
      type:String,
      default:''
    },
    changeName:{
      type:Function,
      default:function(name){}
    }
  },
  data () {
    return {
    }
  },
  created(){
    this.changeName('王五')
  }
}
</script>

4、DD.vue

<template>
  <div class="test">
    <p>4级 inject  {{ title }}</p>
  </div>
</template>

<script>
export default {
  name: 'DD',
  inject:{
    title:{
      type:String,
      default:''
    },
    changeName:{
      type:Function,
      default:function(name){}
    }
  },
  data () {
    return {
    }
  },
  created(){
    this.changeName('赵六')
  }
}
</script>

二、效果

vue学习,使用provide/inject通信,vue.js,学习,javascript

AA组件引用BB组件
BB组件引用CC组件
CC组件引用DD组件
BB、CC、DD都可以通过 inject 获取到AA的provide
provide与inject之间的通讯,既可以传输数据,也可以传输方法
在BB、CC、DD调用AA的方法修改AA的name

不能在inject的changeName方法里,直接修改provide的title

更新beforeCreate状态
初始化inject
初始化props、setup、methods、data、computed、watch
初始化provide
更新created状态

三、参考文档

1、vue provide文档

总结

踩坑路漫漫长@~@文章来源地址https://www.toymoban.com/news/detail-801063.html

到了这里,关于vue学习,使用provide/inject通信的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3-provide和inject

    1.作用场景: 顶层组件向任意的底层组件传递数据和方法,实现跨层组件通信 2.跨层传递普通数据 1.顶层组件通过provide函数提供数据 2.底层组件通过inject函数获取数据 顶层组件 底层组件 3.跨层传递响应数据 顶层组件 底层组件 4.跨层传递方法 顶层组件可以向底层组件传递方

    2024年01月19日
    浏览(46)
  • vue2.x中的provide和inject用法

    父子通信 兄弟通信 跨级通信 1、类型 2、详细 3、示例 爷组件 父组件 孙组件 对比一下前后差异:无论点击多少次,孙组件中的诞生于 year 字段永远都是1995 并不会发生变化,通过 方式1、方式2、方式4传值是可以响应的。 正是官网所提到的: provide 和 inject 绑定并不是可响应

    2024年02月05日
    浏览(48)
  • vue中的provide/inject你知道吗(vue2、vue3)?

    昨天看一个项目代码看到了provide,但是学习的时候也没看到,看了官网才知道vue还有这个API。多数情况下,provide会和inject一起使用,又叫“依赖注入”。 “依赖注入”主要是解决父子组件传值“props逐级传递”问题。 所以,provide/inject的作用就是组件间的传值。 1.provide pr

    2024年02月08日
    浏览(51)
  • VueUse 是怎么封装Vue3 Provide/Inject 的?

    Provide 和 Inject 可以解决 Prop 逐级透传问题。注入值类型不会使注入保持响应性,但注入一个响应式对象,仍然有响应式的效果。 Provide 的问题是无法追踪数据的来源,在任意层级都能访问导致数据追踪比较困难,不知道是哪一个层级声明了这个或者不知道哪一层级或若干个层

    2024年02月03日
    浏览(45)
  • 【Vue】父子组件传参 && 孙子调用爷爷的方法 provide inject

    一. 父传子 父组件先在data中定义要传给子组件的属性名 父组件在中引入子组件 在components中注册 使用步骤 3 中注册好的子组件 在 3 中,父传子 (1)利用 : 将父组件的对象、数组、字符串等传给子组件,供子组件使用 (2)利用 @ 将父组件的方法传给子组件,供子组件调用

    2024年02月08日
    浏览(52)
  • VUE2中provide 和 inject用法,以及怎么做响应式数据?

    provide 和 inject, 用来实现实现跨组件之间通信. 父子/孙子组件之间任意通信. 在祖先组件中通过provide注入一个依赖,不论组件层次有多深,都可以通过inject 来访问到provide的数据. 三个组件: Home组件 - Provide组件 - Sun组件(最底层) 在provide 组件中: 在sun组件中: 这时页面上就会展示

    2024年02月16日
    浏览(35)
  • Vue 中的依赖注入,特别是 Provide 和 Inject,它们的原理、用法和示例

    Vue.js 作为一款现代的前端 JavaScript 框架,提供了诸多方便开发的特性。其中依赖注入是一个非常有用的功能,可以在组件树中传递数据和方法,并使得组件之间的耦合度更低。本文将介绍 Vue 中的依赖注入,特别是 Provide 和 Inject,它们的原理、用法和示例。 在软件开发中,

    2024年02月06日
    浏览(48)
  • 【vue3】vue3的三种写法(附带provide/inject、toRefs说明、ref,reactive的区别)

    写法一(vue3的写法) toRefs定义: toRefs可以将对象(只能接收rective对象)中的属性变成响应式。 正常reactive对象数据也是响应式的,如果用toRefs解构出去会更加方便。 toRefs什么时候用? 数据量如果很多, 我们一般会用解构来简化代码, 那么在vue3 中如果使用对象的解构,

    2024年02月13日
    浏览(49)
  • 展开说说provide和inject

    写在前面 今天讲一下关于vue组件传值里面的其中一个跨组件传值,之前文章写过一篇关于组件传值,里面也有提过关于这块跨组件传值的方式,其中就提到了provide 和 inject的方式,但是并没有展开说,今天就简单的展开说一下,他的取值问题 讲解思路 今天的思路是,我会写

    2024年01月23日
    浏览(46)
  • Provide/Inject 依赖注入(未完待续)

    父组件传递给子组件数据,通过props,但是需要逐层传递 provide/Inject 的推出就是为了解决这个问题,它提供了一种组件之间共享此类值的方式,不必通过组件树每层级显示地传递props 目的是为了共享那些被 认为对于一个组件树而言是全局的数据 provide 接受两个参数:第一个参

    2024年01月20日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包