【问题标题】：How to trigger sibling method in Vue.js如何在 Vue.js 中触发兄弟方法
【发布时间】：2017-11-22 09:40:31
【问题描述】：

问题

我不知道如何在一个组件中触发同级方法

代码

我有这样的方法

methods: {
        closeModal: function(){
             function closeM(){
                $('.modal').css({opacity: 0 , 'visibility':'hidden'});      
             }
             closeM();
        },

        closeOutside: function(){
          $(document).mouseup(function (e){
            var container1 = $('.modal__box');
            if (!container1.is(e.target) &&   
            container1.has(e.target).length === 0)
              {
                this.$emit('closeModal',closeM());
              }
           });      
        }
   }

我的模板

                    <div class="modal" @click="closeOutside()"> 
                        <div class="modal__box z-depth-2 pr">
                            <div class="modal__header"> {{header}} </div>
                            <i class="modal__close pa fa fa-times" @click="closeModal() "> </i>
                            <div class="modal__content">
                                <slot> </slot>
                            </div>
                        </div>
                </div>

问题

如何从 closeOutside 触发 closeModal？ 我是 Vue.js 的新手。

【问题讨论】：

你的意思是不能从closeOutside调用closeModal？
是的，我想触发closeModal的功能

标签： javascript jquery vue.js vuejs2

【解决方案1】：

在 Vue 中，您的所有方法都将绑定到 this，就像任何数据和计算一样。所以你可以使用this.closeModal()

编辑：我创建了一个小提琴，可以帮助您入门。注意：这是对您当前解决方案的彻底改造，但它是以“vue”的方式进行的。
我也是 vue 新手，欢迎改进。

https://jsfiddle.net/DarkFruits/gr0j9s6x/

【讨论】：

【解决方案2】：

this.$emit('closeModal',closeM());

替换为

this.$emit('closeModal',this.closeModal());

【讨论】：