wepy父子组件传值

父组件:

<!-- .default: 绑定小程序冒泡型事件,如bindtap,.default后缀可省略不写;
.stop: 绑定小程序捕获型事件,如catchtap;
.user: 绑定用户自定义组件事件,通过$emit触发。注意,如果用了自定义事件,则events中对应的监听函数不会再执行。 -->

<template>
<Test  @childFn.user="parentFn" :title="parentTitle1" :syncTitle.sync="parentTitle" :twoWayTitle.sync="parentNum" /> 
<view>{{reversedMessage}}</view>

</template>
 import Test from './test';
  components = {
         Test:Test
    };
 watch = {
        parentNum (newValue, oldValue){
            console.log(newValue,oldValue)
        }
    };
data = {
        parentTitle: '666',
        parentTitle1:'123',
        parentNum:1,
};
 computed = {
        // 计算属性reversedMessage,在脚本中可通过this.reversedMessage来引用,在模板中可通过{{ reversedMessage }}来插值
        //只要是组件中有任何数据发生了改变,那么所有计算属性就都会被重新计算。
        reversedMessage() {
            return '长沙市教育局'.split('').reverse().join('')
        }
    };
 methods = {
        //$invoke是一个页面或组件对另一个组件中的方法的直接调用,通过传入组件路径找到相应的组件,然后再调用其方法。
        //this.$invoke('ComA', 'someMethod', 'someArgs');
        //this.$invoke('./../ComB/ComG', 'someMethod', 'someArgs');//someMethod方法名  someArgs参数
        //父组件中的方法
        parentFn(num){
            this.parentNum += 1;
            this.$apply(); 
            console.log(this.parentNum) 
            this.$invoke('Test','testConsole','666')//调用Test组件中的testConsole方法,并传递参数666
        },
}
//子组件
<template>
    <view bindtap="toClick">
        {{title}}{{syncTitle}}{{twoWayTitle}}
    </view>
</template>
<script>
    import wepy from 'wepy'
    export default class Test extends wepy.component {
        data = {

        };

        props = {
           // 静态传值  父子组件数据完全独立互不干扰
            title: String,

            // 父向子单向动态传值 ,父组件传值用.sync修饰符来达到父组件数据绑定至子组件的效果
            syncTitle: {
                type: String,
                default: 'null'
            },
            // twoWay: true来达到子组件数据绑定至父组件的效果
            //如父组件传值用到了.sync修饰符,子组件中同时设置了twoWay:true,则可以达到双向绑定
            twoWayTitle: {
                type: Number,
                default: 'nothing',
                twoWay: true
            }
        };

        methods = {
            toClick(){
                //(this.$parent.parentTitle)调用父组件传过来的数据
               this.$emit('childFn', 100)
            },
            //测试通过$invoke调用其他组件中的方法
            testConsole(arg){
                console.log(arg)
            }
        }

        onLoad() {
            //console.log(this.title); 
            //console.log(this.syncTitle); 
            //console.log(this.twoWayTitle);
          
        }
    };

</script>

 

posted @ 2021-10-28 15:31  dongxiaolei  阅读(224)  评论(0编辑  收藏  举报