vue实现相同子组件触发父组件不同方法

作者: 钱学敏 | 来源:发表于2018-03-27 11:05 被阅读0次

vue实现相同子组件触发父组件不同方法
VUE组件传参
vue 子组件传递信息给父组件
Vue.js组件间调用及传值 2020最新更新
$emit用法子组件向父级组件传值
vue组件间参数与事件传递
vue父子组件通过props和emit实现通信
父子组件传值
react-父子组件间通信
vue.js 核心知识点三

vue点击相同子组件调用父组件不同方法

应用场景

比如：不同的父组件用了相同的分页组件，但是点击分页组件时需要触发父组件里的不同方法
写了个小栗子如下：

<!DOCTYPE html>
<html>

<head>
    <title>vue test</title>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>

<body>
    <div id="app">
        {{ message }}
        <p>点击下面两个组件测试</p>
        <!--相同的子组件 分别调用父组件不同的方法-->
        <my-component fn="A"></my-component>
        <my-component fn="B"></my-component>
    </div>
</body>
<script>
window.onload = function() {
    //第三方变量 实现组件通信
    var trans= new Vue()

    // 定义组件
    var MyComponent = Vue.extend({
        data: function() {
            return {
                intro: 'hello'
            }
        },
        //接收父组件传入的值
        props: ['fn'],
        template: '<div @click="a">A custom component! {{intro}} i am {{fn}}</div>',
        methods: {
            a: function() {
                //通过传入的值区分调用的方法
                trans.$emit(this.fn)
            }
        }
    })

    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue.js!'
        },
        components: {
            'my-component': MyComponent
        },
        created: function() {
            trans.$on("A", function() {
                alert('A')
            });
            trans.$on("B", function() {
                alert('B')
            })
        }
    })
}
</script>

</html>

效果如下