使用vue怎么给组件传递不同的值-创新互联

代码分析：

这里我直接使用了一个Vue的CDN，然后实例化Vue对象就可以使用。

创建一个vue实例

var app7 = new Vue({
  el: '#app',
  data: {
   groceryList: [
    { id: 0, text: '蔬菜' },
    { id: 1, text: '奶酪' },
    { id: 2, text: '随便其它什么人吃的东西' }
   ]
  }
 })

全局创建一个Vue组件

 Vue.component('todo-item', {
  props: ['todo'],
  template: '
{{ todo.text }}
'
 })

通过Vue的实例给组件赋不同的值（通过bind绑定值到一个变量上，子组件通过props接受传入的这个变量值）