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\"

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

以上所述是小编给大家介绍的Vuejs 2.0 子组件访问/调用父组件的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！