zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    MongoVUE破解方法(转)
    Apache和IIS共享80端口,支持多域名
    让作业飞吧,与屌丝兄弟们分享我的分布式作业调度平台 【拥抱开源,拥抱作业调度的神器Quartz.net】
    关于Nbearlite 访问PostgreSql,MySql,Sqlite的Bug
    php5.4.6/5.3.16/5.2.17安装(In windows),配置(转)
    MSSQL翻页存储过程
    话说客户端连接mongoDB的连接参数(转载)
    关于Windows频繁打开关闭端口时出现的问题(转至老赵)
    zeromq的几种模式(转)
    如何设置代理服务器上网
  • 原文地址:https://www.cnblogs.com/dongxiaolei/p/15475934.html
Copyright © 2011-2022 走看看