javascript - 在 vue 组件中使用 props

Question

我刚学Vue，现在从props开始。我无法将它们集成到下面的代码中。我想做一个道具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>