加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

VUEJS 2.0 子组件访问/调用父组件的实例

发布时间:2020-12-17 02:35:27 所属栏目:百科 来源:网络整理
导读:有时候因为布局问题,需要子组件 把数据 传给父组件,并执行父级的某个方法,不多说上代码: 子组件: script type="text/ecmascript-6" export default { methods: { goToFatherDetail (itemId) { // this.$parent.$router.push('goToDetail'); console.log

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

子组件:

<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监测的自定义函数不是父组件的自定义函数。/

}
}
};

父组件:

<script type="text/ecmascript-6">

export default {
methods: {
goToDetail (itemId) {
console.log('父组件走你:' + itemId);
}
}


};

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

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

goToDetail -- 也就是父组件的

goToDetail函数

注意 父组件 的

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

祝你们 编码愉快。

以上这篇VUEJS 2.0 子组件访问/调用父组件的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读