VueJS:@click.native.stop = "";可能的? [英] VueJS: @click.native.stop = "" possible?
问题描述
我在页面上有几个嵌套组件，其父组件具有 @click.native 实现.因此，当我单击子组件(位于父组件内部)占据的区域时，例如执行两个单击操作(父组件和所有嵌套子组件)
<产品详情><幻灯片放映><媒体经理><模态对话框><产品详情><幻灯片放映><媒体经理><模态对话框></产品> 所以我有一个包含多个产品的列表，当我点击属于模态对话框的画布"时 - 我也会在模态对话框所属的产品细节上触发 @click.native.有像 @click.native.stop="code" 这样的东西会很好，这可能吗?
现在我必须这样做:
@click.native="clickHandler"进而方法: {clickHandler(e) {e.stopPropagation();控制台日志(e)；}代码
<div class="media-manager"><div v-if="!getMedia"><h1>准备好后，请上传新图片</h1><a href="#"class="btn btn--对角线 btn--orange"@click="upload=true">在此处上传</a><img :src="getMedia.media_url"@click="上传=真"v-if="getMedia"><br><a class="arrow-btn"@click="上传=真"v-if="getMedia">添加更多图片</a><!-- 使用模态组件，传入 prop --><模态对话框v-if="上传"@click.native="clickHandler"@close="上传=假"><h3 slot="header">上传图片</h3><p slot="body">Hello World</p></ModalDialog>
</模板><脚本>从 '@/components/common/ModalDialog' 导入 ModalDialog；导出默认{成分: {模态对话框，},道具: {文件:{默认值:() =>[],类型:数组，},},数据() {返回 {上传:假，}},计算:{/*** 从媒体数组中获取单个图像*/获取媒体(){常量 [媒体，] = this.files;返回媒体；},},方法: {clickHandler(e) {e.stopPropagation();控制台日志(e)；}}};<style lang="scss" 作用域>.media-manager img {最大宽度:100%；高度:自动；}一种 {光标:指针；}</风格>
你看手册了吗?https://vuejs.org/v2/guide/events.html
有 @click.stop="" 或 @click.stop.prevent=""
所以你不需要使用这个
方法:{clickHandler(e) {e.stopPropagation();控制台日志(e)；}}I have several nested components on the page with parents component having @click.native implementation. Therefore when I click on the area occupied by a child component (living inside parent), both click actions executed (parent and all nested children) for example
<products>
<product-details>
<slide-show>
<media-manager>
<modal-dialog>
<product-details>
<slide-show>
<media-manager>
<modal-dialog>
</products>
So I have a list of multiple products, and when I click on "canvas" belonging to modal dialog - I also get @click.native fired on product-details to which modal-dialog belongs. Would be nice to have something like @click.native.stop="code", is this possible?
Right now I have to do this:
@click.native="clickHandler"
and then
methods: {
clickHandler(e) {
e.stopPropagation();
console.log(e);
}
code
<template>
<div class="media-manager">
<div v-if="!getMedia">
<h1>When you're ready please upload a new image</h1>
<a href="#"
class="btn btn--diagonal btn--orange"
@click="upload=true">Upload Here</a>
</div>
<img :src="getMedia.media_url"
@click="upload=true"
v-if="getMedia">
<br>
<a class="arrow-btn"
@click="upload=true"
v-if="getMedia">Add more images</a>
<!-- use the modal component, pass in the prop -->
<ModalDialog
v-if="upload"
@click.native="clickHandler"
@close="upload=false">
<h3 slot="header">Upload Images</h3>
<p slot="body">Hello World</p>
</ModalDialog>
</div>
</template>
<script>
import ModalDialog from '@/components/common/ModalDialog';
export default {
components: {
ModalDialog,
},
props: {
files: {
default: () => [],
type: Array,
},
},
data() {
return {
upload: false,
}
},
computed: {
/**
* Obtain single image from the media array
*/
getMedia() {
const [
media,
] = this.files;
return media;
},
},
methods: {
clickHandler(e) {
e.stopPropagation();
console.log(e);
}
}
};
</script>
<style lang="scss" scoped>
.media-manager img {
max-width: 100%;
height: auto;
}
a {
cursor: pointer;
}
</style>
Did you check the manual? https://vuejs.org/v2/guide/events.html
There is @click.stop="" or @click.stop.prevent=""
So you don't need to use this
methods: {
clickHandler(e) {
e.stopPropagation();
console.log(e);
}
}
这篇关于VueJS:@click.native.stop = "";可能的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
