vue子组件调用父组件方法的几种方式

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

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

父组件

<template>
  <div>
    <child></child>
  </div>
</template>
<script>
  import child from './childIndex'
  export default {
    components: {
      child
    },
    data () {
      return {
        index: 0
      }
    },
    methods: {
      freshData() {
        console.log('第一种调用方式')
      }
    }
  }
</script>

子组件

<template>
  <div>
    <a-button @click="childFresh">点击刷新父组件</a-button>
  </div>
</template>
<script>
  export default {
    methods: {
      childFresh() {
        this.$parent.freshData();
      }
    }
  }
</script>

二、在子组件里用 $emit 向父组件触发一个事件,父组件监听这个事件

父组件

<template>
  <div>
    <child @freshData="freshData"></child>
  </div>
</template>
<script>
  import child from './childIndex'
  export default {
    components: {
      child
    },
    data () {
      return {
        index: 0
      }
    },
    methods: {
      freshData() {
        console.log('第二种调用方式')
      }
    }
  }
</script>

子组件

<template>
  <div>
    <a-button @click="childFresh">点击刷新父组件</a-button>
  </div>
</template>
<script>
  export default {
    methods: {
      childFresh() {
        this.$emit('freshData')
      }
    }
  }
</script>

三、父组件将方法传入子组件,子组件直接调用

父组件

<template>
  <div>
    <child :freshData="freshData"></child>
  </div>
</template>
<script>
  import child from './childIndex'
  export default {
    components: {
      child
    },
    data () {
      return {
        index: 0
      }
    },
    methods: {
      freshData() {
        console.log('第三种调用方式')
      }
    }
  }
</script>

子组件文章来源地址https://www.toymoban.com/news/detail-659269.html

<template>
  <div>
    <a-button @click="childFresh">点击刷新父组件</a-button>
  </div>
</template>
<script>
  export default {
    props: {
      freshData: {
        type: Function,
        default: null
      }
    },
    methods: {
      childFresh() {
        if (this.freshData) {
          this.freshData();
        }
      }
    }
  }
</script>

到了这里,关于vue子组件调用父组件方法的几种方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • java发送http请求的几种方式,调用第三方接口的方法:HttpUtil、HttpURLConnection等

    参考:https://blog.csdn.net/yubin1285570923/article/details/126225347 put请求 post带请求头 get、delete类似… 使用JDK原生提供的net,无需其他jar包,代码如下: 需要用到commons-httpclient-3.1.jar,maven依赖如下: 看一下我实际应用的例子 需要用到httpclient-4.5.6.jar,maven依赖如下: RestTemplate 是由

    2024年01月18日
    浏览(51)
  • JavaScript深浅拷贝的几种方式

    深浅拷贝主要是针对于引用类型而言的 1. JSON.parse(JSON.strigify(Str)) JSON.stringify() 该方法用于将一个字转换为JSON字符串,该字符串符合JSON格式,并且可以被JSON.parse()方法还原。 对于原始类型的字符串,转换结果会带双引号 如果要转换的对象的属性是undefined,函数或xml对象,该

    2024年01月19日
    浏览(49)
  • vue.js兄弟组件方法调用b组件调用a组件方法

    vue.js 中兄弟组件方法调用 场景:父组件中同时引入两个子组件(A和B),此时B组件点击按钮需要调用A组件里面的方法 方案1:vue的事件总线 方案2:自定义事件($emit) 最终方案:方案2 具体操作 B组件上添加一个自定义的事件,这个是B组件传递给父组件的 @getList=getlist A组件

    2024年02月13日
    浏览(42)
  • JavaScript打开新窗口的几种方式

    window.location.href window.open 指定参数 NewUrl //’ 弹出窗口的地址; ‘newwindow’ //弹出窗口的名字,非必须,可用空’\\\'代替; height=600 //窗口高度; width=900 //窗口宽度; top=0 //窗口距离屏幕上方的象素值; left=0 //窗口距离屏幕左侧的象素值; toolbar=no //是否显示工具栏,yes为显示

    2024年02月14日
    浏览(39)
  • JavaScript里实现继承的几种方式

    JavaScript 中的继承可以通过以下几种方式来实现: 1、原型链继承 :通过将子类的原型对象指向父类的实例来实现继承。这种方式的优点是实现简单,缺点是父类的私有属性和方法子类是不能访问的。   2、借用构造函数继承 :通过在子类的构造函数中调用父类的构造函数来

    2023年04月23日
    浏览(49)
  • 解决前端VUE前端框架报错Error: error:0308010C:digital envelope routines::unsupported的几种方法

    主要是因为 nodeJs V17 版本发布了 OpenSSL3.0 对算法和秘钥大小增加了更为严格的限制,nodeJs v17 之前版本没影响,但 V17 和之后版本会出现这个错误。 **方案1:**打开IDEA 终端,直接输入 **方案2:**打开IDEA 终端,直接输入(问题解决) **方案3:**卸载当前版本,安装合适的版本

    2024年02月04日
    浏览(49)
  • JavaScript 判断是否为数字的几种方式

    喜欢博主的文章,欢迎关注、点赞👍、收藏⭐️、留言📝支持,谢谢大家 js判断是否为数字的方式很多: typeof 、 instanceof 、 Number.isNumber parseInt 、 parseFloat isNaN 、 isFinite Number.isNaN 、 Number.isFinite 正则表达式 终极方案 我们逐一介绍,希望能帮到大家。 typeof 判断值是不是基

    2023年04月10日
    浏览(63)
  • SpringBoot实现异步调用的几种方式

    一、使用 CompletableFuture 实现异步任务 CompletableFuture 是 Java 8 新增的一个异步编程工具,它可以方便地实现异步任务。使用 CompletableFuture 需要满足以下条件: 异步任务的返回值类型必须是 CompletableFuture 类型; 在异步任务中使用 CompletableFuture.supplyAsync() 或 CompletableFuture.runAsy

    2024年02月08日
    浏览(50)
  • Java中常见的几种HttpClient调用方式

    一、HttpURLConnection调用 方式一: 方式二: 缺点:不能直接使用池化技术,需要自行处理输入输出流 二、apache common封装HttpClient 引入依赖 实现 三、CloseableHttpClient 可以使用连接池保持连接,并且过期自动释放。引入jar包 引入依赖 实现 非连接池连接: 四、OkHttp3 引入依赖 实

    2024年02月04日
    浏览(55)
  • Python调用API接口的几种方式

    Python调用API接口的几种方式 相信做过自动化运维的同学都用过API接口来完成某些动作。API是一套成熟系统所必需的接口,可以被其他系统或脚本来调用,这也是自动化运维的必修课。 本文主要介绍python中调用API的几种方式,下面是python中会用到的库。 - urllib2 - httplib2 - pycu

    2024年02月12日
    浏览(44)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包