🖥

#Vue ( nuxt ) – parent and child component props binding example / inc

2023/09/01に公開

Code

pages/counter-three.vue

<template>
  <div>
    <Counter :count="parentCount"/>
    <Counter :count="parentCount"/>
    <Counter :count="parentCount"/>
    <input type="button" @click="incrementParentCounter" value="Increment Parent!">
  </div>
</template>

<script>
import Counter from '~/components/Counter.vue'

export default {
  data () {
    return {
      parentCount: 1
    }
  },
  components: {
    Counter
  },
  methods: {
    incrementParentCounter (e) {
      this.parentCount = this.parentCount + 1
    }
  }

}
</script>

components/Counter.vue

<template>
  <div>
    <h2>
      Count: {{ count }}
    </h2>
    <input type="button" @click="incrementCounter" value="Increment!">
  </div>
</template>

<script>
export default {
  props: {
    count: {
      type: Number,
      default: 1
    },
  },
  methods: {
    incrementCounter (e) {
      this.count = this.count + 1
    }
  }
}
</script>