Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
栏目: 编程语言 · JavaScript · 发布时间: 8年前
内容简介：这篇文章主要介绍了Vuejs 2.0 子组件访问/调用父组件的方法(示例代码),需要的朋友可以参考下
有时候因为布局问题，需要子组件 把数据 传给父组件，并执行父级的某个方法，不多说上代码：
子组件：
<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"
一定要放在 你父组件调用子组件的 模块名上。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
奥美的数字营销观点
[美] 肯特·沃泰姆、[美] 伊恩·芬威克 / 台湾奥美互动营销公司 / 中信出版社 / 2009-6 / 45.00元
目前，媒体的数字化给营销人带来了重大影响。新媒体世界具有多重特性，它赋予企业大量机会，同时也带来挑战。营销人有了数量空前的方式来与消费者互动。然而，许多人面对变革的速度感到压力巨大，而且不知道该如何完全发挥这些新选择所带来的优势。 本书为读者提供了如何运用主要数字媒体渠道的方法；随附了领先的营销人如何在工作中有效运用这些渠道的最佳案例；提供了数字营销的十二个基本原则；协助数字营销人了解什么是......一起来看看 《奥美的数字营销观点》 这本书的介绍吧!
