在 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

There is good documentation about it

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>

在 vue 组件中使用 props

Using props in vue components

html

javascript

vue.js

vue-props