父子组件，兄弟组件事件调用在vue中的应用

2020-08-12 本文已影响0人写写而已

组件化的概念

Web 中的组件其实就是页面组成的一部分，好比是电脑中的每一个元件（如硬盘、键盘、鼠标），它是一个具有独立的逻辑和功能或界面，同时又能根据规定的接口规则进行相互融合，变成一个完整的应用，页面就是有一个个类似这样的部分组成，比如导航、列表、弹窗、下拉菜单等。页面只不过是这些组件的容器，组件自由组合形成功能完善的界面，当不需要某个组件，或者想要替换某个组件时，可以随时进行替换和删除，而不影响整个应用的运行。

组件化的特性

高内聚性，组建功能必须是完整的，如我要实现下拉菜单功能，那在下拉菜单这个组件中，就把下拉菜单所需要的所有功能全部实现。
低耦合度，通俗点说，代码独立不会和项目中的其他代码发生冲突。在实际工程中，我们经常会涉及到团队协作，传统按照业务线去编写代码的方式，就很容易相互冲突，所以运用组件化方式就可大大避免这种冲突的存在、
每一个组件都有子集清晰的职责，完整的功能，较低的耦合便于单元测试和重复利用。

组件化的优点

提高开发效率
方便重复使用
简化调试步骤
提升整个项目的可维护性
便于协同开发
等优点，鉴于此

在vue多页面开发中，一个合格的前端，要学会根据最优情况将一个页面分割成最优的组件组合。同时也要学会处理好父子组件，兄弟组件之间的事件调用

vue中的父子组件事件调用

父组件调用子组件事件

关键词： $refs @hook:mounted

父页面

<template>
    <div class="dashboard contain flex-g1 flex-view">
        我是父页面，我会在子组件mounted之后，去调用子组件的方法
        <child @hook:mounted="hello" ref="child"></child>
    </div>
</template>
<script>
const child = () => import('@views/child/')
export default {
    name: '/',
    components: { child },
    data() {
        return {
        }
    },
    methods: {
        hello() {
            console.log('子组件加载完成')
            // 去调用子组件事件，同样也可以用点击事件执行
            this.$refs.child.hahaha()
        }
    },
    mounted() {
        console.log(this.$refs.login)
        // undefined，直接调用子组件事件会碰到一个尴尬的问题，vue官方也有说明，只会在组件渲染完成之后生效，并且它们不是响应式的
    }
}
</script>
<style lang="less">
</style>

$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。

子组件

<template>
    <div class="child">
        我是子页面，mounted之后会执行父组件事件
    </div>
</template>
<script>
export default {
    name: '/child',
    data() {
        return {
        }
    },
    methods: {
        hahaha() {
            console.log('哈哈哈，这里是子组件！')
        }
    }
}
</script>
<style lang="less">
</style>

子组件调用父组件事件

关键词： 自定义事件

父组件

<template>
    <div class="father">
        我是父组件，把自定义事件传递给子组件，@符号后是子组件要执行事件的名字
        <child @hello="hahaha"></child>
    </div>
</template>
<script>
const child  = () => import('@views/child')
export default {
    name: '/',
    components: { child },
    data() {
        return {
        }
    },
    methods: {
        hahaha() {
            console.log('哈哈哈，我是父组件，你调用了父组件事件！')
        }
    }
}
</script>
<style lang="less">
</style>

子组件

<template>
    <div class="child">
        我是子页面，created之后会通过$emit执行父组件事件
    </div>
</template>
<script>
export default {
    name: '/child',
    data() {
        return {
        }
    },
    methods: {
        hahaha() {
            console.log('哈哈哈，这里是子组件！')
        }
    },
    created() {
        // 执行父组件自定义事件hello，并且传参
        this.$emit('hello', 'Lily')
    }
}
</script>
<style lang="less">
</style>

vue中的兄弟组件事件调用

关键词： eventHub

main.js

new Vue({
    router,
    store,
    data: {
        eventHub: new Vue(),
        name: 'TEEMO'
    },
    render: h => h(App)
}).$mount('#app')

父组件

<template>
    <div class="father">
        我是父组件，你们两个兄弟开始干活吧！
        <!-- 两个关系极度融洽的兄弟 -->
        <mimi></mimi>
        <lili></lili>
    </div>
</template>
<script>
const mimi  = () => import('@views/mimi')
const lili  = () => import('@views/lili')
export default {
    name: '/',
    components: { mimi, lili },
    data() {
        return {
        }
    },
    methods: {
    }
}
</script>
<style lang="less">
</style>

子组件1

<template>
    <div class="brother-lili">
        我是兄弟组件lili，负责监听事件，你可以传值给我
    </div>
</template>
<script>
export default {
    name: '/brother-lili',
    data() {
        return {
        }
    },
    mounted() {
        this.$root.eventHub.$off('eventName')
        // 兄弟我在这里监听，等着你调用
        this.$root.eventHub.$on('eventName', val => {
            console.log(val)
        })
    }
}
</script>
<style lang="less">
</style>

子组件2

<template>
    <div class="brother-mimi">
        我是兄弟组件mimi，负责触发事件，我会把结果给你
        <button @click="get">
            点我
        </button>
    </div>
</template>
<script>
export default {
    name: '/brother-mimi',
    data() {
        return {
        }
    },
    methods: {
        get() {
            this.$root.eventHub.$emit('eventName', {
                name: 'mimi',
                msg: '好的哥哥！'
            })
        }
    }
}
</script>
<style lang="less">
</style>

至此，基本的组件事件调用已经完成，当然你也可以使用vue做状态管理，watch某个值，如果有变动就去调用事件，相对来说不建议使用。
延伸：

eventHub也可以做vuex做的事情，同样的也可以通过watch监听$root数据的变动

watch: {
    '$root.name'(val) {
        console.log('val change')
        console.log(val)
    }
}