创建组件rate.vue

<template lang="html">
   <li>{{message}}</li>
</template>

<script>

export default {
  name: 'vb-rate',
  props:['message'],
  methods: {
  }
}
</script>

使用组件

有两种方式，全局注册和局部注册

全局注册：

main.js

import Vue from 'vue'
import App from './App.vue'

import Rate from './components/rate/rate.vue'

Vue.component(Rate.name, Rate); //全局注册组件



new Vue({
  el: '#app',
  render: h => h(App)
})

App.vue.js

<template>
  <div id="app">
    <!--使用全局注册,直接使用-->
    <ol>
      <vb-rate v-for="item in groceryList" :message="item.text"></vb-rate>
      <vb-rate message="Rick"></vb-rate>
    </ol>

  </div>
</template>

<script>

import Rate from './components/rate/rate.vue' //

export default {
  data () {
    return {
      groceryList: [
            { text: 'Vegetables' },
            { text: 'Cheese' },
            { text: 'Whatever else humans are supposed to eat' }
          ]
    }
  }
}
</script>

局部注册

main.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

<template>
  <div id="app">
    <!--使用局部注册-->
    <ol>
      <vb-rate v-for="item in groceryList" :message="item.text"></vb-rate>
      <vb-rate message="Rick"></vb-rate>
    </ol>

  </div>
</template>

<script>

import Rate from './components/rate/rate.vue' //

export default {
  data () {
    return {
      groceryList: [
            { text: 'Vegetables' },
            { text: 'Cheese' },
            { text: 'Whatever else humans are supposed to eat' }
          ]
    }
  },
  components: {
    [Rate.name] : Rate// 局部注册组件
  }
}
</script>

这个地方有个注意点：

<vb-rate :message="item.text"></vb-rate>
<vb-rate message="Rick"></vb-rate>
message有`:`表示vue变量，没有`:`表示字符串