组件之间的传值 父传子

01===>父传子 props:["a","name"]来进行
在父亲页面可以看见 子组的值是动态的

 

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"]
}

 

02===>父传子 props:["a","name"]来进行
让组件里面的值 是动态的 让data来管理 通过v-bind来实现 :a="val"
zi.vue不变
fu.vue如下

<!-- 引入子组件 -->
<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> 

03===>父传子
让组件里面的值 是动态的 data是从数据库里面拿到的
zi.vue不变
fu.vue如下
{
    <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>

}