javascript - vue コンポーネントで props を使用する

Question

私はちょうど Vue を学んでいて、今は小道具から始めています。それらを以下のコードに統合するのに問題があります。propをコンポーネントnameに送信できるようにしたい。コンポーネントに表示してレンダリングしgreetたい：name<greet name="User"></greet><div>Welcome, User!</div>

Vue.component('greet', {
  data() {
    return {

    }
  },
  template: '<div>Welcome !</div>'
})

new Vue({ el: '#app' })

Answer 1

それについての良いドキュメントがあります

Vue.component('greet', {
  props: {
    'player-name': {
      type: String,
      required: true
    }
  },
  data() {
    return {

    }
  },
  template: '<div>Welcome {{playerName}}!</div>'
})

new Vue({
  el: '#app'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <greet player-name="User"></greet>
</div>