一个模板中的事件触发其他模板中的功能

Question

当同一个模板中有两个或更多个sliders并且它们具有:drag-end="myFunc(flower)"时，事件触发每个值更改以及所有sliders。所以myFunc在所有sliders上启动。

<template> 
<div> 
    <div v-for="flower in flowers"> 
      <slider ref="slider" v-model="flower.value" :drag-end="myFunc(flower)"></slider> 
    </div> 

    <div v-for="tree in trees"> 
      <slider ref="slider" v-model="tree.value" :drag-end="myFunc(tree)"></slider> 
    </div> 
<div> 
</template> 
<script> 
const Slider = require('../controls/slider.vue'); 

module.exports = { 

    methods: { 
     myFunc: function (plant) { 
      console.log("Plant value", plant.value); 
     }, 
    }, 
    components: { 
     Slider 
    }, 
    mounted: function() { 

    }, 
    data() { 
     return { } 
    } 
} 
</script> 

Answer 1

正如我在文档看，drag-end是事件，所以后来它应该被用来作为事件：

<div v-for="flower in flowers"> 
     <slider ref="slider" v-model="flower.value" @drag-end="myFunc(flower)"></slider> 
</div> 

<div v-for="tree in trees"> 
     <slider ref="slider" v-model="tree.value" @drag-end="myFunc(tree)"></slider> 
</div> 

Answer 2

您应该为每个滑块声明不同的函数。

<template> 
<div> 
    <div v-for="flower in flowers"> 
      <slider ref="slider" v-model="flower.value" :drag-end="funcFlower(flower)"></slider> 
    </div> 

    <div v-for="tree in trees"> 
      <slider ref="slider" v-model="tree.value" :drag-end="funcTree(tree)"></slider> 
    </div> 
<div> 
</template> 
<script> 
const Slider = require('../controls/slider.vue'); 

module.exports = { 

    methods: { 
     funcFlower: function (plant) { 
      console.log("Plant value", plant.value); 
     }, 
     funcTree: function (plant) { 
      console.log("Plant value", plant.value); 
     }, 
    }, 
    components: { 
     Slider 
    }, 
    mounted: function() { 

    }, 
    data() { 
     return { } 
    } 
} 
</script>