vue中父组件传值给子组件

父组件传值给子组件

<div id="app">
  <parent></parent>
</div>
<!-- 父组件parent模板 -->
<template id='parent'>
  <div>
    <subs :a="item.a" :b="item.b" v-for="(item,index) in arr"> </subs>
  </div>
</template>

<!-- 子组件sub模板 -->
<template id='sub'>
  <div>
    {{a}},{{b}}
  </div>
</template>

let subs = {
    template: "#sub",
    data() {
      return { }
    },
    //子组件中接受父组件传递过来的值
    props: ['msg', 'a', 'b']
  }

  let parent = {
    template: "#parent",
    data() {
      return {
        msg: "parent组件",
        arr: [{a: 1,b: 2},{a: 3,b: 4},{a: 5,b: 6}]
        }
    },
    components: {
      subs
    }
  }

  let vue = new Vue({
    el: '#app',
    components: {
      parent
    }
  })

打印结果为：