实例 Vue 使用 $emit() 方法向父组件发送产品名称和评级

<template>

  <h2>Example $emit() Method</h2>

  <p>Ratings received from child component:</p>

  <ul id="ulElRatings">

    <li v-for="x in ratings">{{ x }}</li>

  </ul>

  <child-comp v-on:message-sent="receiveEmit" />

</template>

​

<script>

export default {

  data() {

    return {

      ratings: ['Hairdrier, rating: 7']

    }

  },

  methods: {

    receiveEmit(name,rating) {

      const item = name + ', rating: ' + rating;

      this.ratings.push(item);

    }

  }

}

</script>

​

<style>

#ulElRatings {

  background-color: lightgreen;

  padding: 20px;

  max-width: 300px;

  font-family: 'Courier New', Courier, monospace;

}

</style>