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>
  • 相关阅读:
    解决no such file or directory的问题
    手把手教你如何通过企业账号in house发布程序 ----都是被苦逼的appstore审核逼的!!!!!
    java中如何使用log4j
    xStream完美转换XML、JSON
    Spring MVC 教程
    StringUtils 类的使用
    CSS 与IE浏览器兼容问题
    CSS各种颜色的符号
    TABLE 应用 CSS美化
    初学WebSocket
  • 原文地址:https://www.cnblogs.com/dongxiaolei/p/15475934.html
Copyright © 2011-2022 走看看