5.组件（2） 之 父级传子级

父级数据传递给子级:

　　1.通过在子组件的身上加一个v-bind:自定义属性名=父级的数据

　　　　<ppa v-bind:data="arr"> ->简写 <ppa :data="arr">

　　2.子组件通过props去接收

　　　　props:['data']

　　3.使用

　　　　{{data}}

例子：

DOM部份

<div id="app">
        <h1>{{arr}}</h1>
        <hr>
        <ppa :data="arr"></ppa> //1
</div>

script部份

    let obj = {
        props:['data'], //2
        template:`
            <ul>
                <li v-for="(val,key) in data">{{val}}</li> //3
            </ul>
        `
    }

    Vue.component('ppa',obj);
//父级↓
    new Vue({
        el:'#app',
        data:{
            arr:[1111,2222,3333]
        }
    });

子级中的data的语法（1）

props: {  
　　data: {  //只接受 数据类型 符合的数据，否则是个[]
　　　　type: Array,
　　　　default: []
　　}
},

 

---

 

如果要让子级有功能（操作父级数据的能力），那么可以把父级传进来的数据变成自己的。 子级改变自己的数据，是不会影响父级的数据。

步骤:

　　1.传数据

　　　　:data="arr"

　　2.接收数据：

　　　　props:['data']

　　3.data(){   //把父级传过来的数据变成自己的

　　　　　return {

　　　　　　　cd:this.data  //如果是引用类型的数据就需要深拷贝一下

　　　　　}

　　　}

　　4.`<div>{{cd}}</div>` 使用自己的数据

注意：

　　 子级最好只操作自己的数据，不要直接操作父级的数据 。 如果父级传进来的数据是复合类型（引用类型）的，那么变成自己的数据时，要深拷贝一下，不然改变子级会影响父级。 如果父级需要接受子级改变的数据，就进入下一篇《子级传父级》

子级中的data的语法（2）

props: ['date'],
data() {  //子级的数据，data是一个函数，return一个对象，对象里面放数据
    return {
        ary:JSON.parse(JSON.stringify(this.date))//通过这种方式可以把 接收过来的父级的数据 *深克隆* 成自己的数据。（深克隆，针对引用类型的）
    }
} 

 

转载于:https://www.cnblogs.com/MrZhujl/p/10226069.html