wepy父子组件props传值

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属性值,当在父组件中改变时,会同时改变子组件对应的值。
}

猜你喜欢

转载自blog.csdn.net/weixin_40970987/article/details/84302879
今日推荐