app.vue中绑定@click="add"，在其他页面定义add方法的逻辑

Question

问题描述

我在app.vue中写了些结构当作公共部分，其中一个按钮（此按钮为公共部分，很多页面都用得到）上绑定了@click="add"，然后在首页和其他页面都用到了公共部分的这个按钮，而且需要每个页面单独定义点击这个按钮的add()方法的逻辑。该怎么做？

Answer 1

建议从vue组件化入手，把你说的那个结构抽成一个组件，在不同页面引入
搭配父子组件emit来实现->每个页面单独定义点击这个按钮的add()方法

Answer 2

解决思路

1、 先在router-view中定义ref

<router-view ref="router"></router-view>

2、 利用refs，进行对应界面的指定事件调用

watch:{
   '$route'(){
        /**
         * 因为可能你有的界面不需要这个事件，所以在这里进行一次判断
         *判断这个路由的对应文件中是否存在 add的这个function，如果有才执行，否则不执行
         */
        if(this.$refs.router.add){
            this.$refs.router.add();        
        }
    }
}

Answer 3

watch $route 不同页面 那个dom.onclick（（）=》 {}）