JSFiddle - React, Tailwind, and code Playground

by eglowc

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="some-element">
<div>
  <br>
  <child v-for='(v, k, i) in parentMsg' v-bind:message="v"></child>
</div>
</div>

JavaScript

Vue.component('child', {
  // props 정의
  props: ['message'],
  // 데이터와 마찬가지로 prop은 템플릿 내부에서 사용할 수 있으며
  // vm의 this.message로 사용할 수 있습니다.
  template: '<span>{{message}} <br></span>'
})

new Vue({
  el: '#some-element',
  data: {
  parentMsg: [10,22,33]
  }
  // 옵션
})