当前位置:首页 » 《随便一记》 » 正文

在Vue中,向上通信(从孙子到爷爷)的常用方法有以下几种:

11 人参与  2024年04月11日 18:25  分类 : 《随便一记》  评论

点击全文阅读


在Vue中,向上通信(从孙子到爷爷)的常用方法有以下几种:

使用$parent访问父组件,再使用$parent访问爷爷组件,调用其方法。使用$root访问根组件,再使用深度优先搜索遍历其子孙组件,找到爷爷组件,调用其方法。使用Vue实例的provide()inject()方法,在爷爷组件中提供一个函数或对象,让孙子组件使用inject()获取爷爷组件中的属性或方法,间接调用其方法。

下面简单介绍这三种方法的使用。

使用$parent

在孙子组件中使用$parent访问父组件,再使用$parent访问爷爷组件,调用其方法。示例代码如下:

<!-- 爷爷组件 --><template>  <div>    <father @callGrandfather="callBack"></father>  </div></template><script>export default {  methods: {    callBack() {      console.log('爷爷的方法');    }  }};</script><!-- 父组件 --><template>  <div>    <son :callGrandfather="callBack"></son>  </div></template><script>export default {  methods: {    callBack() {      this.$emit('callGrandfather');    }  },  components: {    'son': {      template: '<div><button @click="callBack">调用爷爷的方法</button></div>',      props: ['callGrandfather'],      methods: {        callBack() {          this.$parent.$parent.callBack();        }      }    }  }};</script>
使用$root

在孙子组件中使用$root访问根组件,再使用深度优先搜索遍历其子孙组件,找到爷爷组件,调用其方法。示例代码如下:

<!-- 爷爷组件 --><template>  <div>    <father @callGrandfather="callBack"></father>  </div></template><script>export default {  methods: {    callBack() {      console.log('爷爷的方法');    }  }};</script><!-- 父组件 --><template>  <div>    <son :callGrandfather="callBack"></son>  </div></template><script>export default {  methods: {    callBack() {      this.$emit('callGrandfather');    }  },  components: {    'son': {      template: '<div><button @click="callBack">调用爷爷的方法</button></div>',      props: ['callGrandfather'],      methods: {        callBack() {          let grandfather = this.$root.$children.find(item => item.$options.name === 'Grandfather');          grandfather.callBack();        }      }    }  }};</script>
使用provide()inject()

在爷爷组件中使用provide()提供一个函数或对象,让孙子组件使用inject()获取爷爷组件中的属性或方法,间接调用其方法。示例代码如下:

<!-- 爷爷组件 --><template>  <div>    <father :data="data"></father>  </div></template><script>export default {  provide() {            // 在爷爷组件中提供一个方法    return {      data: '爷爷的数据',      callBack: this.callBack    }  },  methods: {    callBack() {      console.log('爷爷的方法');    }  }};</script><!-- 父组件 --><template>  <div>    <son></son>  </div></template><script>export default {  inject: ['data', 'callBack'],  // 在孙子组件中注入方法  components: {    'son': {      template: '<div><button @click="callBack">调用爷爷的方法</button></div>',      methods: {}    }  }};</script>

注:这里提供的只是几种可能的方法,具体使用要根据实际情况选择。
vue3.0照例只是写法改变


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/93996.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 抽卡后,气运之子怎么都缠上来了小说(夏挽棠)(抽卡后,气运之子怎么都缠上来了)全书+后续+结局在线阅读
  • 前传爱意随风消逝续集:全文+番外乔清浅宋轻舟:结局+番外新上热文
  • 宋昭黎陆铭绪(假如从没拥抱你)前文+全本完整阅读预售作品抢先看
  • 终章小说搬空海港!我携军舰嫁军官躺赢了完结篇(温婉历战)已更新+延伸(搬空海港!我携军舰嫁军官躺赢了)清爽版
  • 贵妻在上:废材老公来护航完结篇(贵妻在上:废材老公来护航)章节目录+章节前文(宋锦瑶霍少霆)全章无套路在线
  • 离婚后,前夫一家给我跪下了隐藏剧情_明白双宿双飞江城必读文_小说后续在线阅读_无删减免费完结_
  • 乔芊芊顾宴夜小说(乔芊芊顾宴夜)(踹了渣男后,禁欲大佬为我失控)前传+阅读全新作品预订
  • 假如从没拥抱你小说(宋昭黎陆铭绪)全本完整阅读最新章节(假如从没拥抱你)_笔趣阁
  • 特工医妃,摄政王的腹黑掌上欢前言+后续_苏清叙裴玄褚最新阅读_小说后续在线阅读_无删减免费完结_
  • 热文推荐绑定站姐系统后,我成娱乐巨头了附加(沈霁月沈暨星)(绑定站姐系统后,我成娱乐巨头了)最新章节列表
  • 爱你的事当做秘密惊天黑幕_鹿言裴禹连载_小说后续在线阅读_无删减免费完结_
  • 和前夫穿越后又重生了番外+结局(挽星阙靖安)小说在线阅读

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1