zoukankan      html  css  js  c++  java
  • 微信小程序 组件通信相关知识整理

    1、自定义组件间通信与事件

    https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html

    (1)、WXML 数据绑定:用于父组件向子组件的指定属性设置数据

    <!-- 父组件 index.wxml-->
    <view class="container">
        // 子组件
        <v-child propA="{{dataA}}" propB="{{dataB}}" propC="{{dataC}}"></v-child>
    </view>
    
    
    <!-- index.json-->
    {
      "usingComponents": {
        "v-child": "/components/child/index"
      }
    }
    
    
    <!-- index.js-->
    
    const app = getApp()
    
    Page({
      data: {
        dataA: "来自父组件index的数据",
        dataB: true,
        dataC: 2300
      }
    })
    <!-- 子组件 child  index.html -->
    <view class="content">
      <view>String: {{propA}}</view>
      <view>Boolean: {{propB}}</view>
      <view>Number: {{propC}}</view>
    </view>
    
    <!-- 子组件  index.js -->
    Component({
      /**
       * 组件的属性列表
       */
      properties: {
        propA: String,
        propB: Boolean,
        propC: Number
      },
    
      /**
       * 组件的初始数据
       */
      data: {
    
      },
    
      /**
       * 组件的方法列表
       */
      methods: {
    
      }
    })

    页面渲染结果:

    (2)、事件:用于子组件向父组件传递数据,可以传递任意数据

    <!-- 子组件 event -->
    
    
    <!-- index.wxml -->
    
    <view class="content">
      <view class="title">自定义事件</view>
      <button bindtap="tapclick">点击</button>
    </view>
    
    <!-- index.js -->
    
    Component({
    
      /**
       * 组件的方法列表
       */
      methods: {
        tapclick: function(event) {
          let behavior = {
            id: 123456,
            name: 'Natasha',
            gender: 'female'
          }
          this.triggerEvent('customevent', {
            behavior: behavior
          }, {})
        }
      }
    })
    <!-- 父组件 index -->
    
    
    <!-- index.wxml -->
    
    <view class="container"> 
        <v-event bind:customevent="onCustomEvent"></v-event>
        <view wx:if="{{id}}">id: {{id}}</view>
        <view wx:if="{{name}}">name: {{name}}</view>
        <view wx:if="{{gender}}">gender: {{gender}}</view>
    </view>
    
    
    <!-- index.js -->
    
    const app = getApp()
    
    Page({
      onCustomEvent: function(event) {
        console.log(event)
        let id = event.detail.behavior.id,
            name = event.detail.behavior.name,
            gender = event.detail.behavior.gender
        
        this.setData({
          id: id,
          name: name,
          gender: gender
        })
      },
    })

    通过 triggerEvent 触发自定义事件,并把数据通过第二个参数(detail对象)传递给父组件

    2、组件间代码共享 Behavior

    假如多个子组件共享相同的 properties,data,methods,在每一个组件中都去重复粘贴相同的代码是完全没有必要的,这个时候可以用到 behavior

    新建一个 my-behavior.js 文件

    module.exports = Behavior({
      behaviors: [],
      properties: {
        carModel: String,
        price: Number,
        sale: Boolean
      },
      data: {
        myBehaviorData1: "eyes on me"
      },
      attached: function() {
    
      },
      methods: {
        myBehaviorMethod: function() {
          console.log("I don't have an idea to buy or not")
        }
      }
    })

    在组件中 引用 behavior.js

    <!-- js -->
    
    let myBehavior = require ("../my-behavior.js")
    Component({
      behaviors: [myBehavior],
      /**
       * 组件的属性列表
       */
      properties: {
    
      },
    
      /**
       * 组件的初始数据
       */
      data: {
    
      },
    
      /**
       * 组件的方法列表
       */
      methods: {
    
      }
    })
    
    
    <!-- wxml -->
    
    <view class="content">
      <view>v-like component</view>
      <view class="title">共有data属性:</view>
      <view>{{myBehaviorData1}}</view>
      <view class="title">共有property属性:</view>
      <view>型号: {{carModel}}</view>
      <view>价格: {{price}}元</view>
      <view>是否折扣:{{sale}}</view>
      <view class="title">共有方法:</view>
      <button bindtap="myBehaviorMethod">button</button>
    </view>

    例如,父组件 index.wxml 中有 v-like 和 v-movie 共用相同的代码

    <!-- 父组件 index.wxml -->
    
    <view class="container">
      <v-like carModel="SYLPHY" price="135000" sale="true"></v-like>
      <v-movie carModel="XTS" price="250000" sale="false"></v-movie>
    </view>

    页面渲染效果

    3、自定义组件的显示与隐藏

     显示与隐藏可以使用 wx:if 和 hidden 来控制,二者都接受一个 Boolean 类型的值,所以传值的时候就要注意了

      <!-- "false" 是一个非空字符串,所以会显示 -->
      <view wx:if="false">1、wx:if="false"</view>
      <!-- {{false == ""}}是true,空字符串被解析为false,而hidden为false时,是不会隐藏的,所以会显示 -->
      <view hidden="">2、hidden=""</view>
      <!-- 同上,wx:if 为true时才会插入到DOM节点中,此时为false,所以不会显示 -->
      <view wx:if="">3、wx:if=""</view>
      <!-- 与 1 相同,无论是字符串 "true" 还是 "false",都被解析成true,所以下面两个都会被隐藏 -->
      <view hidden="true">4-1、hidden="true"</view>
      <view hidden="false">4-2、hidden="true"</view>
      <!-- 以下两个都是布尔值,所以一个不被渲染到DOM中,一个被隐藏 -->
      <view wx:if="{{false}}">5、wx:if="{{false}}"</view>
      <view hidden="{{true}}">6、hidden="{{true}}"</view>

    渲染结果:

    按照上面的写法,避开雷区,尝试用 wx:if 和 hidden 分别来隐藏自定义组件 v-like 和 v-movie

    <view class="container">
      <v-like hidden="{{true}}" carModel="SYLPHY" price="135000" sale="true"></v-like>
      <v-movie wx:if="{{false}}" carModel="XTS" price="250000" sale="false"></v-movie>
    </view>

    理论上,这两个自定义组件应该都不会显示,但实际上,只有 wx:if 达到了预期的效果

    那为什么自定义组件 v-like 上的hidden没有起作用呢?无论 hidden="{{true}}" 还是 hidden="{{false}}" 都没办法让它隐藏,这里有一种可能就是 hidden 被当做成和 carModel,price 一样的自定义属性了

    现在尝试将 hidden 当做自定义属性由父组件向子组件v-like传值,v-movie 不做修改。将 hidden 值设为 true。如果成功的话,v-like 组件将被隐藏,v-movie 组件将会显示

    <!-- index.wxml -->
    
    <view class="container">
      <v-like hidden="{{hidden}}" carModel="SYLPHY" price="135000" sale="true"></v-like>
      <v-movie wx:if="{{hidden}}" carModel="XTS" price="250000" sale="false"></v-movie>
    </view>
    
    
    <!-- index.js -->
    
    Page({
      data: {
        dataA: "来自父组件index的数据",
        dataB: true,
        dataC: 2300,
        hidden: true
      }
    })

    v-like 组件加上 hidden 属性

    <!-- like.wxml  -->
    
    <view class="content" hidden='{{hidden}}'>
      <view>v-like component</view>
      <view class="title">共有data属性:</view>
      <view>{{myBehaviorData1}}</view>
      <view class="title">共有property属性:</view>
      <view>型号: {{carModel}}</view>
      <view>价格: {{price}}元</view>
      <view>是否折扣:{{sale}}</view>
      <view class="title">共有方法:</view>
      <button bindtap="myBehaviorMethod">button</button>
    </view>
    
    
    <!-- like.js -->
    
    properties: {
        hidden: Boolean
    },

    v-movie 不加 hidden属性

    <view class="content">
      <view>v-movie component</view>
      <view class="title">共有data属性:</view>
      <view>{{myBehaviorData1}}</view>
      <view class="title">共有property属性:</view>
      <view>型号: {{carModel}}</view>
      <view>价格: {{price}}元</view>
      <view>是否折扣:{{sale}}</view>
      <view class="title">共有方法:</view>
      <button bindtap="myBehaviorMethod">button</button>
    </view>

    渲染结果:

    结果和预期的一样,所以,要控制自定义组件的显示与隐藏,如果不考虑性能消耗的情况下,可以直接使用 wx:if;如果 hidden 更符合实际需求,可按如上方法来使用

    示例代码:https://github.com/frwupeng517/wetchat-applet-behavior-

  • 相关阅读:
    Ftp、Ftps与Sftp之间的区别
    Previous Workflow Versions in Nintex Workflow
    Span<T>
    .NET Core 2.0及.NET Standard 2.0 Description
    Announcing Windows Template Studio in UWP
    安装.Net Standard 2.0, Impressive
    SQL 给视图赋权限
    Visual Studio for Mac中的ASP.NET Core
    How the Microsoft Bot Framework Changed Where My Friends and I Eat: Part 1
    用于Azure功能的Visual Studio 2017工具
  • 原文地址:https://www.cnblogs.com/rogerwu/p/10058848.html
Copyright © 2011-2022 走看看