如何将参数传递给 Vue 组件以启动组件实例

Question

I am very new to the Vue. I am trying to learn how to create and re-use Vue components. The initial data passed to a component is not updated on an click event. Here is my code (full version at https://jsfiddle.net/gpawel/486ysvxj/33/ ) What I am doing doing wrong? Thank you.

<div id="components-demo">
  <button-counter count='3'></button-counter>
  <br><br>
  <button-counter count='4'></button-counter>
</div>

Vue.component('button-counter', {
    props: ['count'],
    methods: {
    add: function() {
        return {count: count++}
    }
  },
  template: '<button v-on:click="add()">You clicked me {{count}}  times.</button>'
})

new Vue({ 
    el: '#components-demo'
})

Answer 1

Here is the working fiddle: https://jsfiddle.net/68p1u9ks/

Vue.component('button-counter', {
    props: ['initialCount'],
    data: function () {
        return {
          count: 0,
        }
    },
    methods: {
        add: function() {
            this.count++
        },
    },
    created() {
          this.count = this.initialCount
    },
    template: '<button v-on:click="add()">You clicked me {{count}}  times.</button>'
})

I think you need to maintain state inside the button-counter component. Also rename the count prop to initial-count .

<div id="components-demo">
  <button-counter :initial-count='3'></button-counter>
  <br><br>
  <button-counter :initial-count='4'></button-counter>
</div>

Answer 2

See your updated fiddle . You are directly mutating the count property, save it as a data first and mutate the internalCount. Also, use a : to cast the prop to a Number and not a string.

props: ['count'],
  data() {
  return {
    internalCount: this.count
  }
},
methods: {
  add: function() {
    return {
      count: this.internalCount++
    }
  }
},

Answer 3

You can not change props in child component. You should use $emit to change props:

parent component:

<template>
<div>
  <child :count="count" @add="add" />
</div>
</template>
<script>
export default {
  data: () => ({
    count: 1
  }),
  methods: {
   add() {
     this.count = this.count + 1;
   }  
  }
}
</script>

and child component:

<template>
  <button v-on:click="add()">You clicked me {{inComponentCount}}  times.</button>
</template>
<script>
export default {
  props: [count],
  computed: {
    inComponentCount() {
      return this.count;
    }
  },
  methods: {
   add() {
     this.$emit('add')
   }  
  }
}
</script>