Vuejs2.0中子组件访问/调用父组件的示例分析-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

Vuejs2.0中子组件访问/调用父组件的示例分析

这篇文章给大家分享的是有关Vuejs 2.0中子组件访问/调用父组件的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

十年的陇南网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。成都营销网站建设的优势是能够根据用户设备显示端的尺寸不同,自动调整陇南建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联从事“陇南网站设计”,“陇南网站推广”以来,每个客户项目都认真落实执行。

子组件:

 
 
  export default { 
    methods: { 
      goToFatherDetail (itemId) { 
        // this.$parent.$router.push('goToDetail'); 
        console.log('子组件方法走了' + itemId); 
        this.$emit('refreshbizlines', itemId); /* itemId就是子要传的数据 - 这里很重要,refreshbizlines就是父组件$on监测的自定义函数不是父组件的自定义函数。*/ 
      } 
    } 
  }; 

父组件:

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

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

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

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

goToDetail -- 也就是父组件的

goToDetail函数

注意 父组件 的

v-on:refreshbizlines="goToDetail"

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

感谢各位的阅读!关于“Vuejs 2.0中子组件访问/调用父组件的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


分享标题:Vuejs2.0中子组件访问/调用父组件的示例分析
本文地址:http://kswsj.cn/article/pgseis.html

其他资讯