组件之间的传值 父传子

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>
 {
    自定义接口 要获取自定义属性 就在数组内 定义自定义属性的名称 接受父组件的值 
     所有被props接受到的数据 都会被挂载到this上面去
    props:["a",1)">]
}

 

 

02===>父传子 props:["a",1)">]来进行
让组件里面的值 是动态的 让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" {
    components: {
        child
    },1)"> {
           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  {
        components: {
           child
        },data () {
             {
                list:[
                        {name:"zhang1",age:18},{name:"zhang2",age:19
}