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

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中,子组件如果需要访问父组件的方法,可以采用自定义事件v-on指令(简写:@)来完成。举例如下:以下案例将演示点击子组件模板中的按钮,触发子组件中的方法childFunc。然后在该方法中使用$emit来触发子组件的自定义事件parent。由该自定义事件来调用父组件的parentFun方法。HTML代码: &lt;child @p...

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

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

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

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

Vue2组件间通信方式

1.父组件获取子组件的实例 2.用于操作原生dom元素 祖先向其所有后代传值 可以在父组件定义componentChildren。并把父组件传递下去,让子组件调用addChild方法,以实现父组件获取后代组件 封装button组件 利用vue实例自带的 once、 off、$emit、方法实现数据传递。全局状态管理 官网: https://vuex.vuej...

vue中$refs, $emit, $on, $once, $off的使用详解

父组件调用子组件的方法,可以传递数据。父组件:子组件:子组件调用父组件的方法并传递数据。子组件:父组件:兄弟组件之间相互传递数据。首先创建一个vue的空白实例(兄弟组件的桥梁)子组件a:发送放使用$emit自定义事件把数据带过去。子组件b:接收方通过$on监听自定义事件的callback接收数据 父组件:监...

怎样操作Vue表单类父子组件数据传递

1、传递基本类型数据当子组件内容较少时,会直接传递基本类型数据,通常为String, Number, Boolean三种。先看个例子:&lt;!-- 父组件 parent.vue --&gt;&lt;template&gt; 问卷调查 &lt;child v-model="form.name"&gt;&lt;/child&gt; 姓名:{{form.name}} &lt;/template&gt; import child from './child.vue' export defa...

vue 组件通信方式 ,父子、隔代、兄弟 三类通信,六种方法

父组件注入,子组件接收。这种方法是 Vue 组件的基础,相信大部分同学耳闻能详,所以此处就不举例展开介绍。ref :如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例 parent / $children :访问父 / 子实例 attrs: 包含了父作用域中不被 prop 所识别...

如何在vue.js组件之间进行数据传递

在父组件 father.vue 中引用子组件 child.vue,把 name 的值传给 child 组件。&lt;template&gt;// message 定义在子组件的 props 中&lt;child :message="name"&gt;&lt;/child&gt;&lt;/template&gt; import child from './child.vue'; export default { components: { child }, data() { return...

父子组件

1.父子组件方法传递?在Vue中子组件是不能访问父组件的方法的,如果子组件想要访问父组件的方法, 必须通过父组件传递 2.如何传递方法     2.1在父组件中通过v-on传递方法       传递格式 v-on:自定义接收名称 = "要传递方法" &amp;...

vue. js如何进行数据共享?

1. Props 传递:这是最简单且直接的方式,父组件通过 props 将数据传递给子组件。子组件通过声明 props 选项来接收父组件传递的数据。这种方式适用于简单的父子组件数据传递,但不适合跨多层级的数据共享。例如,在 React 中:jsx function Parent() { return ;} function Child(props) { return {...

Top