[英]How to trigger sibling method in Vue.js
I can't figure out how to trigger a sibling method in one component我不知道如何在一个组件中触发同级方法
I have a methods like this我有这样的方法
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());
}
});
}
}
my Template我的模板
<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>
How to trigger closeModal from closeOutside?如何从closeOutside触发closeModal? I'm new to Vue.js.
我是 Vue.js 的新手。
In Vue, all your methods will be bound to this
, just like any data and computed.在 Vue 中,你所有的方法都将绑定到
this
,就像任何数据和计算一样。 So you can use this.closeModal()
所以你可以使用
this.closeModal()
Edit: I created a fiddle which might help you getting started.编辑:我创建了一个可能会帮助您入门的小提琴。 Caution: It is a complete rework of your current solution, however it is doing it the 'vue' way.
注意:这是对您当前解决方案的完全返工,但它是以“vue”方式进行的。
I am also quite a newcomer to vue, so feel free to improve it.我也是 vue 的新手,所以请随时改进它。
https://jsfiddle.net/DarkFruits/gr0j9s6x/ https://jsfiddle.net/DarkFruits/gr0j9s6x/
this.$emit('closeModal',closeM());
替换为
this.$emit('closeModal',this.closeModal());
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.