Vue功能会多次触发

Question

我正在使用vue cli，并且具有更新文本@click的功能，但它可以多次运行：

User.vue

<div  @click="newText('Volume')">
<Chart :text=text ></Chart>
volume
</div>

<div  @click="newText('Temperature')">
<Chart :text=text ></Chart>
temp
</div>

<div  @click="newText('Weight')">
<Chart :text=text ></Chart>
weight
</div>

<script>
newText: function(argT) {
        const text = argT;
        this.text = text;
        console.log('text', this.text);
</script>
},

在Chart组件中，当我进行console.log时，它运行了9次！

props: ['text'],

text1(){
       console.log('text', this.text)
    },

由于我的User组件显示了3次（故意，因为我有3个用户，所以显示了3次），并且每个度量值（温度，体积和重量）都有一个框，因此是9次。但是我不确定为什么每次都运行。

我希望它只对我单击的框运行一次。 任何帮助都会很棒，谢谢！

更新（附加代码）

User.vue

<template >
   
<div class="user"> 
<div v-for="(item, index) in users" :key="item.id">
 <div>
    <div @click.stop="myFunction(index); newData(index, item.Vol); newText('Volume')">
 <v-touch v-on:doubletap="isOpen = !isOpen;"   >
   <transition name="modal">
      <div v-if="isOpen">
        <div class="overlay" @click.self="isOpen = false;">
          <div class="modal">
               <Chart :text=text :dat=dat ></Chart>
           </div>
         </div>
       </div>
 </v-touch>
               volume </div>

     <div @click.stop="myFunction(index);newData(index, item.Temp); newText('Temperature')">
 <v-touch v-on:doubletap="isOpen = !isOpen;"   > 
  <transition name="modal">
      <div v-if="isOpen">
        <div class="overlay" @click.self="isOpen = false;">
          <div class="modal">
                <Chart :text=text :dat=dat ></Chart>  
          </div>
         </div>
       </div>
 </v-touch>
               temp </div>

    <div @click.stop="myFunction(index); newData(index, item.Weight); newText('Weight')">
   <v-touch v-on:doubletap="isOpen = !isOpen;"   >
     <transition name="modal">
      <div v-if="isOpen">
        <div class="overlay" @click.self="isOpen = false;">
          <div class="modal">
                <Chart :text=text :dat=dat ></Chart>   
           </div>
         </div>
        </div>
  </v-touch>     
                  weight</div>
         </div>
   
     </div>

     </div>

</template>
<script>


/* eslint-disable */
import Charts from './Charts'
export default {
  name: 'User',
  components: {
    Charts,
  },
 

methods:{

newData: function(arrIndex, event) {
        const dat = event;
        this.dat = dat;       
},

newText: function(argT) {
        const text = argT;
        this.text = text;
        console.log('text', this.text);
},
myFunction: function (arrIndex) {
          const name = this.users[arrIndex].name;
          this.name = name;   
      },

},

}
</script>

Charts.vue

<div class="tabs">
        <a v-on:click="activetab=1" v-bind:class="[ activetab === 1 ? 'active' : '' ]">Settings</a>
        <a v-on:click="activetab=2" v-bind:class="[ activetab === 2 ? 'active' : '' ]">Chart</a>
    </div>
    
<div class="content">
        <div v-if="activetab === 1" class="tabcontent">
            <Settings></Settings>
        </div>
        <div v-if="activetab === 2" class="tabcontent">
       <Chart :dat=dat :text=text ></Chart > 

  </div>
</template>
<script>
import Chart from './Chart'
import Settings from './Settings'
/* eslint-disable */
export default {
  name: 'Charts',
  props: ['activetab', 'dat','text' ],
  
  components: {
    Settings,
    Chart,
    
  },
methods: {
    text1(){
       console.log('text', this.text)
    },
</script>

最后我将文本传递到图表：

<template>
    <div id="container" ref="chart"></div>
</template>

<script>
 title: {
         text: this.text,   
        }
 series: [ {
        name: this.text,   
        data: this.dat,
       
    }],