时间戳

首页 > 解决方案 > 如何添加具有不同事件的相同模板

javascript - 如何添加具有不同事件的相同模板

问题描述

我有一个模板（滑块）通过了两次。现在我只需要向第一个“滑块”模板添加一个事件（幻灯片）。有可能做到这一点吗？如何传递这个活动道具？有人可以向我展示一些简单的事件示例吗？

Parent component


<template>
 <div>
   <Heading 
     color="#215398"      
     font_color="#ffffff"
    />
   <Slider // --> only here I would like to have a slider   
     color="#215398"
     img="images/wp_logo.png"
     prev="block"
     next="block"
   />
   <Slider 
     color="#F5F5F5"
     img="images/shape.png"
     prev="none"
     next="none"
   />
  </div>
</template>

.

Slider component


.slider
.container.center(
    :style="{backgroundColor: color}"
    )
    .main_box.center
        .slider_boxs                
            .prev
                img(src="images/arrow_left.png" 
                :style="{display: prev}"
                )
            .slider_box(v-for="box in data")
                .slider_box__title
                    h3 {{box.title}}
                .slider_box__text
                    p {{box.text}}
                .slider_box__img
                    img(:src="src")
            .next
                img(
                    src="images/arrow_right.png" 
                    :style="{display: next}"
                )

标签： javascriptvue.js

解决方案

您可以传递如下事件

<Slider @slide="onSlideEvent"
 color="#215398"
 img="images/wp_logo.png"
 prev="block"
 next="block"
/>

and in methods

methods: {
  onSlideEvent (someData) {
    // it will be triggered when you use this.$emit('slide', somedata) from the Slide component
  
  } 
}

它是幻灯片组件，您不需要在道具中定义它，只需使用

this.$emit('slide', somedata)

它会触发你通过的父事件

如果您不将此事件传递给第二个滑块，则可以在 Slider 组件中放置一些条件来检查事件是否已通过。

推荐阅读