Vue.js 实践小结：从经验中汲取新知

2023-10-31 16:37:25

作为前端开发人员，编码技术必须时不时拿出来实践一番，否则很多细节的东西就会随着时间流逝而消失，而且通过每一次实践你总能发现一些自己之前没有注意到的知识点，加深自己对一门语言或者框架的理解。

方式一：直接使用 $emit

<template>
  <div>
    <button @click="$emit('change')">提交</button>
  </div>
</template>

<script>
export default {
  methods: {
    change() {
      console.log('change')
    }
  }
}
</script>

方式二：使用 ref

<template>
  <div>
    <button @click="change">提交</button>
  </div>
</template>

<script>
export default {
  methods: {
    change() {
      this.$refs.button.click()
    }
  }
}
</script>

方式三：使用 v-on

<template>
  <div>
    <button v-on:click="change">提交</button>
  </div>
</template>

<script>
export default {
  methods: {
    change() {
      console.log('change')
    }
  }
}
</script>

方式三是方式一的语法糖。

案例：购物车

<template>
  <div>
    <cart-item v-for="item in items" :key="item.id" :item="item"></cart-item>
    <div>总价：{{ totalPrice }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '苹果', price: 10 },
        { id: 2, name: '香蕉', price: 20 },
        { id: 3, name: '橙子', price: 30 }
      ],
      totalPrice: 0
    }
  },
  computed: {
    totalPrice() {
      return this.items.reduce((acc, item) => acc + item.price, 0)
    }
  }
}
</script>