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中子组件访问/调用父组件的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！