wepy父子组件props传值

ゝ一纸荒年。 2022-04-15 02:29 409阅读 0赞

WePY中父子组件之间传值依靠props来实现，props对象中声明了我们需要传递的值。传值有两种方式，包括静态传值和动态传值。  
**静态传值**  
父组件向子组件传递常量数据，只能传递String字符串类型。  
在父组件template模板部分的组件标签中，使用子组件props对象中所声明的属性名作为其属性名来向子组件传值。

父：
    <child title="mytitle"></child>
    子：
    props = {
        title: String
    };
    onLoad () {
        console.log(this.title); // mytitle
    }

动态传值（一个变另外一个跟着变）  
父---->子：父组件使用.sync修饰符  
子---->父：设置子组件props的twoWay: true  
父<—>子：既使用.sync修饰符，同时子组件props中添加的twoWay: true

// 父：
    <child :title="parentTitle" :syncTitle.sync="parentTitle" :twoWayTitle="parentTitle"></child>
    data = {
        parentTitle: 'p-title'
    };
    // 子：
    props = {
        // 静态传值
        title: String,
        // 父向子单向动态传值
        syncTitle: {
            type: String,
            default: 'null'
        },
        twoWayTitle: {
            type: String,
            default: 'nothing',
            twoWay: true
        }
    };
    onLoad () {
        console.log(this.title); // p-title
        console.log(this.syncTitle); // p-title
        console.log(this.twoWayTitle); // p-title
        this.title = 'c-title';
        console.log(this.$parent.parentTitle); // p-title.
        this.twoWayTitle = 'two-way-title';
        this.$apply();
        console.log(this.$parent.parentTitle); // two-way-title.  --- twoWay为true时，子组件props中的属性值改变时，会同时改变父组件对应的值
        this.$parent.parentTitle = 'p-title-changed';
        this.$parent.$apply();
        console.log(this.title); // 'c-title';
        console.log(this.syncTitle); // 'p-title-changed' --- 有.sync修饰符的props属性值，当在父组件中改变时，会同时改变子组件对应的值。
    }