在Vue.js 2.0框架中，子组件与父组件之间的通信是常见的需求。这篇文章将详细解释如何在VueJS 2.0中实现子组件访问并调用父组件的实例。
我们要理解Vue.js中的组件通讯机制。Vue.js提供了几种主要的方式来实现组件间的数据传递，包括props（父向子）、事件（子向父）以及Vuex状态管理等。在本文的例子中，我们将主要关注子组件如何通过事件向父组件传递数据和调用父组件的方法。
**子组件访问父组件的方法：**
1. **使用`this.$parent`属性**：子组件可以直接通过`this.$parent`访问到其父组件的实例，然后调用父组件的方法。然而，这种方法并不推荐，因为它破坏了组件的封装性，如果父组件的结构发生变化，子组件可能需要进行相应的调整。
```javascript
// 子组件
this.$parent.goToDetail(itemId);
```
2. **使用自定义事件（Event Emitter）**：这是推荐的方法，子组件通过触发一个自定义事件来通知父组件。父组件监听这个事件，并在事件触发时执行相应的方法。
```javascript
// 子组件
// 在事件触发器中触发自定义事件
this.$emit('refreshbizlines', itemId);
```
```javascript
// 父组件
// 使用v-on或`:`（@）监听子组件的自定义事件
<v-child-component @refreshbizlines="goToDetail"></v-child-component>
```
在提供的代码示例中，子组件有一个名为`goToFatherDetail`的方法，它通过`$emit`触发了一个名为`refreshbizlines`的事件，并传递了`itemId`参数。父组件使用`v-on`监听这个事件，并将处理方法`goToDetail`绑定给它。当子组件触发事件时，父组件的`goToDetail`方法会被执行。
```javascript
// 子组件
<template>
<!-- ... -->
<li class="menu-item" @click="goToFatherDetail(233)"></li>
<!-- ... -->
</template>
<script>
export default {
methods: {
goToFatherDetail(itemId) {
this.$emit('refreshbizlines', itemId);
}
}
};
</script>
// 父组件
<template>
<!-- ... -->
<router-view class="items-show" v-on:refreshbizlines="goToDetail" keep-alive></router-view>
<!-- ... -->
</template>
<script>
export default {
methods: {
goToDetail(itemId) {
console.log('父组件走你：' + itemId);
}
}
};
</script>
```
在这个例子中，`v-on:refreshbizlines="goToDetail"`告诉Vue.js当`refreshbizlines`事件触发时，应该调用`goToDetail`方法。这样，当子组件通过`$emit`发送事件时，父组件会接收到这个事件并执行相应的方法。
总结一下，VueJS 2.0中子组件调用父组件的方法通常采用自定义事件的方式，以保持组件的解耦和封装性。在编写组件时，应优先考虑使用这种通信方式，避免直接访问`this.$parent`。通过这种方式，可以创建可复用、可维护的组件，使得代码更加清晰和易于管理。
