2019-5-16 更新：

此文可能已久远。建议到：https://www.tuicool.com/articles/F7BV3qf  查看。

有问题欢迎加群：115658205 进行交流！

---

 

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

子组件：

<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); /* itemId就是子要传的数据 - 这里很重要,refreshbizlines就是父组件$on监测的自定义函数不是父组件的自定义函数。*/

            }
        }
    };
</script>itemId就是子要传的数据 - 这里很重要,refreshbizlines就是父组件$on监测的自定义函数不是父组件的自定义函数。*/

            }
        }
    };
</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);
            }
        }
    };
</script>
    };
</script>

 

父组件用 v-on 来做个监测的函数来检测，最终生成的代码是 类似 
on: {
      "refreshbizlines": function($event) {
        _vm.goToDetail(123)
}
}
所以原理就是 子组件 访问 父组件的 检测函数 refreshbizlines ，访问了，则执行 refreshbizline 下面的 函数 
goToDetail -- 也就是父组件的 
goToDetail函数

 

 

注意 父组件 的 

 

v-on:refreshbizlines="goToDetail"

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

最后，有问题欢迎加群：115658205 进行交流！

祝你们 编码愉快。