zoukankan      html  css  js  c++  java
  • 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))//通过这种方式可以把 接收过来的父级的数据 *深克隆* 成自己的数据。(深克隆,针对引用类型的) } }
  • 相关阅读:
    BZOJ3744 : Gty的妹子序列
    BZOJ2827 : 千山鸟飞绝
    BZOJ3547 : [ONTAK2010]Matchings
    BZOJ1185 : [HNOI2007]最小矩形覆盖
    BZOJ3046 : lagoon
    BZOJ3743 : [Coci2014]Kamp
    BZOJ3742 : Painting
    iOS移动开发周报-第25期
    适合码农工作时玩的游戏:Scrum
    iOS移动开发周报-第24期
  • 原文地址:https://www.cnblogs.com/MrZhujl/p/10226069.html
Copyright © 2011-2022 走看看