搜索
您的当前位置:首页正文

Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)

2023-12-08 来源:爱乐情感

有时候因为布局问题,需要子组件 把数据 传给父组件,并执行父级的某个方法,不多说上代码:

子组件:

<template> <div class="isShowing" ref="isShowing"> <div class="menu-wrapper" ref="scroll_warpper" v-show="!hid_show_switch"> <ul ref="scroll_warpper_ul"> <li class="menu-item" @click="goToFatherDetail(233)"> </li> </ul> </div> <v-loading class="isloading" v-show="hid_show_switch"></v-loading> </div> </template> <script type="text/ecmascript-6"> export default { methods: { goToFatherDetail (itemId) { // this.$parent.$router.push('goToDetail'); console.log('子组件方法走了' + itemId); this.$emit('refreshbizlines', itemId); /* <span style="font-family: Arial, Helvetica, sans-serif;">itemId就是子要传的数据 - 这里很重要,refreshbizlines就是父组件$on监测的自定义函数不是父组件的自定义函数。*/</span> } } }; </script> 

父组件:

<template> <div class="main-wrapper"> <div class="tab-wrapper"> <div class="tab-item"> <router-link to="/isShowing" class="table-item-text">正在热映</router-link> </div> <div class="tab-item"> <router-link to="/willShow" class="table-item-text">即将上映</router-link> </div> </div> </div> <router-view class="items-show" v-on:refreshbizlines="goToDetail" keep-alive></router-view> </div> </template> <script type="text/ecmascript-6"> export default { methods: { goToDetail (itemId) { console.log('父组件走你:' + itemId); } }<strong> }; </script></strong> 

父组件用 v-on 来做个监测的函数来检测,最终生成的代码是 类似

on: { "refreshbizlines": function($event) { _vm.goToDetail(123)}}

所以原理就是 子组件 访问 父组件的 检测函数 refreshbizlines ,访问了,则执行 refreshbizline 下面的 函数

goToDetail -- 也就是父组件的

goToDetail函数

注意 父组件 的

v-on:refreshbizlines="goToDetail"

 一定要放在 你父组件调用子组件的 模块名上。

总结

以上所述是小编给大家介绍的Vuejs 2.0 子组件访问/调用父组件的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

小编还为您整理了以下内容,可能对您也有帮助:

vue子组件调用父组件的方法

一开始感觉调用方法应该和react差不多,父组件传入子组件,子组件调用就行了。但感觉应该还有其他方法,于是将这些方法记录下。

父组件中引用子组件:

子组件中写法:

一定要在 props 里声明 setBillDetail 函数,不然 setBillDetail 始终为 undefined !!!
初学 vue ,自己就踩了个大坑,忘记在 props 里加了。

父组件:

子组件:

这样写,编译会通过,但 eslint 会给出 error :

子组件:

总之,记住一句话: HTML 中的 attribute 名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符,更推荐 kebab-case 。

此处举例省略。

参考:
Vue子组件调用父组件的方法

vue子组件调用父组件的方法

一开始感觉调用方法应该和react差不多,父组件传入子组件,子组件调用就行了。但感觉应该还有其他方法,于是将这些方法记录下。

父组件中引用子组件:

子组件中写法:

一定要在 props 里声明 setBillDetail 函数,不然 setBillDetail 始终为 undefined !!!
初学 vue ,自己就踩了个大坑,忘记在 props 里加了。

父组件:

子组件:

这样写,编译会通过,但 eslint 会给出 error :

子组件:

总之,记住一句话: HTML 中的 attribute 名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符,更推荐 kebab-case 。

此处举例省略。

参考:
Vue子组件调用父组件的方法

vue子组件怎么调用父组件的方法

vue中的组件有个ref属性,你可以理解成组件的id,而父组件这有个属性值叫$refs,可以取出所有带ref属性的组件。
然后就可以通过this.$refs.xxx访问到子组件。xxxx即为你的组件的ref属性的值!
里面的属性或者方法都可以直接取了!

vue子组件怎么调用父组件的方法

vue中的组件有个ref属性,你可以理解成组件的id,而父组件这有个属性值叫$refs,可以取出所有带ref属性的组件。
然后就可以通过this.$refs.xxx访问到子组件。xxxx即为你的组件的ref属性的值!
里面的属性或者方法都可以直接取了!

vue子页面调用父页面方法

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

父组件

子页面

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

父组件

子组件

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

父组件

子组件

vue子页面调用父页面方法

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

父组件

子页面

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

父组件

子组件

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

父组件

子组件

vue 子组件跨多层调用父组件中方法

父组件

子组件

vue兄弟组件之间方法调用

方法一:

父组件 index.vue   中含有两个兄弟组件 business.vue  及  detail.vue

当 business.vue中主协办分配选择完成后 需要刷新   detail.vue中的数据

在父组件中 的 business.vue组件上 定义触发的方法  <business @updateDate='updateDate'></business>

在父组件中 的  detail.vue组件上 定义触发的方法  < detail.vue ref='detail'></detail>

在兄弟组件中 主协办分配选择完成后showUserAssignData方法去触发父组件 index.vue的updateDate方法

在父组件中 updateDate方法去触发detail.vue组件中刷洗数据的方法

 方法二:采用公共bus方法---js方法

第二个子组件需要调用第二个子组件方法

在main.js中 注册一个公共实例并绑定到原型上

 Vue.prototype.$bus = new Vue()

在第一个子组件中注册一个方法 在created 或者mounted中注册

在兄弟组件中触发该方法

爱乐情感还为您提供以下相关内容希望对您有帮助:

vue子组件怎么调用父组件的方法

vue中的组件有个ref属性,你可以理解成组件的id,而父组件这有个属性值叫$refs,可以取出所有带ref属性的组件。然后就可以通过this.$refs.xxx访问到子组件。xxxx即为你的组件的ref属性的值!里面的属性或者方法都可以直接取...

面试题:vue组件之间有哪些通信方式?

父组件可以向子组件传递style和class,它们会合并到子组件的根元素中 示例 父组件         importHelloWorldfrom"./components/HelloWorld.vue";exportdefault{components:{    HelloWorl...

vue兄弟组件之间方法调用

方法一:父组件 index.vue   中含有两个兄弟组件 business.vue  及  detail.vue 当 business.vue中主协办分配选择完成后 需要刷新   detail.vue中的数据 在父组件中 的...

编程大白话之-vue页面之间方法的互调

1.利用ref 2.通过组件的 on方法;1.直接在子组件中通过this.$parent.event来调用父组件的方法 2.在子组件中使用$emit向父组件触发一个事件,父组件监听这个事件 3.父组件把方法传入子组件中,在子组件里直接调用这个...

vue 组件通信方式,六种方法

(1)props / $emit 适用 父子组件通信 父组件注入,子组件接收。这种方法是 Vue 组件的基础,相信大部分同学耳闻能详,所以此处就不举例展开介绍。注意:props是单向数据流,既只能从父级传到子级,如果想要达到双向,子...

vue单文件组件通常是如何调用实例方法的

方法一:子组件监听父组件发送的方法 方法二:父组件调用子组件方法 子组件:export default { mounted: function () { this.$nextTick(function () { this.$on('childMethod', function () { console.log('监听成功'...

Vue.js组件通信中的几种姿势具体分析

Vue组件间通信父组件向子组件通信方法一:props使用 props ,父组件可以使用props向子组件传递数据。父组件vue模板father.vue子组件vue模板child.vue方法二 使用$children使用 $children 可以在父组件中访问子组件。子组件向父...

Vue父子组件间通信(数据传递)

父组件传递:在使用子组件时,使用 v-bind:自定义接收名称="要传递的数据" 子组件接收: props:["自定义接收名称"]父组件传递: v-on:自定义接收名称="要传递的方法" 子组件接收时自定义一个方法,在方法中触...

vue父子组件之间的通信

App.vue文件:这时在input中输入内容,然后按enter键,就以看到子组件传递过来的数据,子组件向父组件传递数据成功。 当在input输入框中输入数据,并按enter键时,它会触发keypress.enter事件,从而调用事件处理函数enter...

父子组件

接收格式 props: ["自定义接收名称"]1.父子组件方法传递?在Vue中子组件是不能访问父组件的方法的,如果子组件想要访问父组件的方法, 必须通过父...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

Top