组件之间的传值 父传子

fu.vue
<h2>我是父亲</h2>
<br>
<!-- 引入子组件 -->
<child a="test1" name="张三"></child>
<child a="test2" name="李四"></child>
<script>
import child from "../zi/zi" //引入子组件
export default {
    components: {
       child
    },
    data () {
        return {
        }
    }
}
</script>

zi.vue 子组件:
<span>{{ a }} {{ name}}</span>
export default {
    //自定义接口 要获取自定义属性 就在数组内 定义自定义属性的名称 接受父组件的值 
    // 所有被props接受到的数据 都会被挂载到this上面去
    props:["a","name"]
}

<!-- 引入子组件 -->
<child :a="val" :name="name"></child>
<child :a="val" :name="name"></child>
<script>
import child from "../zi/zi"
export default {
    components: {
        child
    },
    data () {
        return {
           val:"li123 我是动态的",
           name:"张三"
        }
    }
}
</script> 

{
    <div v-for="(item,i) in list" :key="i"> //动态渲染
       <child :a="item.name" :name="item.age"></child> //属性绑定
    </div>
    <script>
    import child from "../zi/zi"
    export default {
        components: {
           child
        },
        data () {
            return {
                list:[
                        {name:"zhang1",age:18},
                        {name:"zhang2",age:19},
                        {name:"zhang3",age:20},
                    ]
            }
        }
    }
    </script>
}