VUE-组件传值之父传子

父级向子级传值：使用属性

父级组件：

<template>
    <div><h1>购物车</h1>
    <ul>
        <li v-for="(v,i) of fruits" :key="i">
            {{v.name}}
            单价：{{v.prince}}
            <Counter :qu="v.qu"></Counter>
        </li>
    </ul>
    </div>
</template>
<script>
import Counter from './Counter.vue'

export default ({
    components:{Counter},
  data(){
  return{
    fruits:[
      {name:"苹果",prince:1.2,qu:0},
      {name:"香蕉",prince:2.4,qu:0},
      {name:"草莓",prince:3.6,qu:0}
    ]
  }
}
})
</script>

父组件操作：

1. 引入组件import Counter from './Counter.vue
2. 注册组件components:{Counter}
3. 属性:qu=“v.qu”

子级组件：

<template>
    <span>
        <button >-</button>
        <span>{{qu}}</span>
        <button>+</button>
    </span>
</template>
<script>

export default({
        props:["qu"]
})
</script>

子组件操作：
props:[“qu”]