# Vue에서 props를 문자열로 component로 전달(props as string or integer/increment example)

4117 단어 Vue.js

해결됨


콜론:bind로 하위 구성 요소에 props 전달
<template>
  <div>
-    <Counter count="1"/>
-    <Counter count="2"/>
-    <Counter count="3"/>
+    <Counter :count="1"/>
+    <Counter :count="2"/>
+    <Counter :count="3"/>
  </div>
</template>

bind가 아니더라도 프로부터 줄 수 있는 게 뭘까요?

Code


pages/counter-three.vue
<template>
  <div>
    <Counter count="1"/>
    <Counter count="2"/>
    <Counter count="3"/>
  </div>
</template>

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

export default {
  components: {
    Counter
  }
}
</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>

증가하면 문자가 증가합니다.

Original by Github issue

좋은 웹페이지 즐겨찾기