html Math.random()未使用内联$Emit输出正确的随机数

mgdq6dx1  于 2022-11-27  发布在  其他
关注(0)|答案(2)|浏览(108)

我试图了解$emit事件如何在vue中工作,因此请遵循本指南:https://learnvue.co/tutorials/vue-emit-guide,我试图做类似的方式,但与vue 2 js和每次我点击按钮,它给我四舍五入的数字,但不是随机数字作为指南链接。
我想知道我做错了什么,为什么在引导行中他们像这样传递i变量:
添加的子组件="(i)=〉计数+= i”/〉
我的子组件:

<template>
  <div class="inline-emit">
    <h1 class="mesg-text">{{ msg }}</h1>
    <p>We can send data up from Child.vue</p>

    <button class="btn" @click="$emit('add', Math.random())">
      Add Math.random()
    </button>
  </div>
</template>

<script>
export default {
  name: "InlineEmitEventChild",
  props: {
    msg: {
      type: String,
      default: "Example of an inline Emit",
    },
  },
};
</script>

我应用程序版本

<template>
  <div id="app">
    <h1>Emitting and Listening to Events</h1>
    <InlineEmitEventChild @add="add(10)" />
    <p class="count-text">
      Count: <strong>{{ count }}</strong>
    </p>
  </div>
</template>

<script>
import InlineEmitEventChild from "./components/InlineEmitEventChild.vue";
export default {
  name: "App",
  components: {
    InlineEmitEventChild,
  },

  data() {
    return {
      count: 0,
    };
  },

  methods: {
    add(i) {
      this.count += i;
    },
  },
};
</script>

始终取整数:

应如下所示:

gywdnpxw

gywdnpxw1#

在父组件中,您有硬编码值,

<InlineEmitEventChild @add="add(10)" />

更改为

<InlineEmitEventChild @add="add" />
tv6aics1

tv6aics12#

要测试代码,您可以点击这里〉〉〉Example,只需点击添加数学随机数即可获得随机数。
子元件

<template>
  <div class="hello">
    <button @click="addRandom">Add Math Random</button>
  </div>
</template>

<script>
export default {
  name: "RandomWorld",
  data() {
    return {
      Num1: 0,
    };
  },
  methods: {
    addRandom() {
      this.Num1 = Math.random(this.Num1);
      console.log(this.Num1);
      this.$emit("getrandom", this.Num1);
      //console.log(this.Num1);
    },
  },
};
</script>

父元件

<template>
   <Childcomponent @getrandom="displayRandom($event)"/>
</template>
<script>
import Childcomponentvue from "./childcomponents.vue";
export default {
  name: "App",
  components: {
    Childcomponent: Childcomponentvue,
  },
  data() {
    return {
      Random:0,
    };
  },
  methods: {
    displayRandom(e){
      console.log(e);
      this.Random = e;
    }
  },
};
</script>

相关问题