vue子组件调用父组件父页面的方法「建议收藏」

vue子组件调用父组件父页面的方法「建议收藏」如图:选择城市后,页面重新请求数据!(城市选择是子组件)选择完后不刷新页面,重新调用接口渲染主页面!第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法父组件<template><div><child></child></div></template&gt…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

如图:选择城市后,页面重新请求数据!(城市选择是子组件)选择完后不刷新页面,重新调用接口渲染主页面! 

vue子组件调用父组件父页面的方法「建议收藏」

 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法

父组件

<template>
  <div>
    <child></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>

子组件

<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod();
      }
    }
  };
</script>

第二种方法是在子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了。

父组件

<template>
  <div>
    <child @fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>

子组件

<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$emit('fatherMethod');
      }
    }
  };
</script>

第三种是父组件把方法传入子组件中,在子组件里直接调用这个方法

父组件

<template>
  <div>
    <child :fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>

子组件

<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod() {
        if (this.fatherMethod) {
          this.fatherMethod();
        }
      }
    }
  };
</script>

三种都可以实现子组件调用父组件的方法,但是效率有所不同,根据实际需求选择合适的方法

更多技巧请查看vue专栏   https://blog.csdn.net/qq_42221334/column/info/27230/1

vue子组件调用父组件父页面的方法「建议收藏」

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/186571.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 软件激活成功教程教程2[通俗易懂]

    软件激活成功教程教程2[通俗易懂]第四章–调试器及相关工具入门在写这章之前,我看了一下看雪以往的教程。本来想参考一下,可忽然发现,写这样的一章,是一件非常愚蠢的事情,因为我觉的关于这些工具的使用教程。看雪教程中已经写的够详细的了,我并不认为你会看不懂。所以我不想做浪费时间的人,本章就此搁浅。推荐看《CrackTutorial2001》,推荐看《看雪论坛精华一、二、三、四》,推荐看《加密与解密--软件保护技术及完全解决方案》,

  • 使用sp_executesql存储过程执行动态SQL查询

    使用sp_executesql存储过程执行动态SQL查询Thesp_executesqlstoredprocedureisusedtoexecutedynamicSQLqueriesinSQLServer.AdynamicSQLqueryisaqueryinstringformat.ThereareseveralscenarioswhereyouhaveanSQLq…

  • QTreeWidget简单用法「建议收藏」

    QTreeWidget简单用法「建议收藏」1、voidQTreeWidget::setHeaderLabels(constQStringList&labels)设置表头,QStringList有几项,表头就有多少列2、voidQHeaderView::setSortIndicatorShown(boolshow)Thispropertyholdswhetherthesortindicatoris

    2022年10月26日
  • fsockopen/curl/file_get_contents效率比较[通俗易懂]

    fsockopen/curl/file_get_contents效率比较

  • setrequestproperty参数_setrequestproperty「建议收藏」

    setrequestproperty参数_setrequestproperty「建议收藏」场景:j2mesetRequestProperty解决办法j2mesetRequestPropertyhttpConnection里的setRequestProperty怎么用啊,我想通过手机客户端链接到服务器,并且在客户端输入关键字查询信息,在服务器那边返回查询结果给客户端——解决方案——————–加上客户端希望使用无格式的文本内容类型和GET方法请求应…

  • route -n命令_router.replace

    route -n命令_router.replace<router-linkclass=”icon-go”:to=”{name:’首页’}”v-if=”$route.matched[0].path==’/category'”></router-link><spanclass=”icon-go”@click=”$router.go(-1)”v-e…

    2022年10月24日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号