微信小程序组件化

父子组件通信

微信中还提

1、父组件给子组件传值

在子组件中定义属性

properties: {    // 复杂定义    name:{      type: String,      value:'张三丰'    },    // 简单定义    name2:String},

父组件在引用子组件的时候通过设置属性的方式给子组件传值

2、 子组件给父组件传值

在组件中绑定一个自定义事件

// 引用了自定义的组件， 绑定了myevent事件，这个事件对应的是parentEvent方法<test-button name="张无忌" bindmyevent="parentEvent"></test-button>

在子组件中触发这个事件，可以给父组件传值。

子组件中通过triggerEvent触发事件

 methods: {    方法名字: function(){      var myEventDetail = {} // detail对象，提供给事件监听函数      var myEventOption = {} // 触发事件的选项      this.triggerEvent('myevent', myEventDetail, myEventOption)    }  }

2.Behaviors

注册一个 behavior，接受一个 Object 类型的参数

module.exports = Behavior({

  behaviors: [],

  properties: {

    myBehaviorProperty: {

      type: String

    }

  },

  data: {

    myBehaviorData: {}

  },

  attached: function(){},

  methods: {

    myBehaviorMethod: function(){}

  }})

使用时，用 slot 属性来将节点插入到不同的 slot 上。

<!-- 引用组件的页面模板 -->
<view>
  <component-tag-name>
    <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
    <view slot="before">这里是插入到组件slot name="before"中的内容</view>
    <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
    <view slot="after">这里是插入到组件slot name="after"中的内容</view>
  </component-tag-name>
</view>

组件样式隔离

默认情况下，自定义组件的样式只受到自定义组件 wxss 的影响。除非以下两种情况：

• app.wxss 或页面的 wxss 中使用了标签名选择器（或一些其他特殊选择器）来直接指定样式，这些选择器会影响到页面和全部组件。通常情况下这是不推荐的做法。
• 指定特殊的样式隔离选项 styleIsolation 。

Component({
  options: {
    styleIsolation: 'isolated'
  }
})

在开发者工具中预览效果

styleIsolation 选项从基础库版本 2.6.5 开始支持。它支持以下取值：

• isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；
• apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；
• shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）

• 定义生命周期方法

• Component({
    lifetimes: {
      attached: function() {
        // 在组件实例进入页面节点树时执行
      },
      detached: function() {
        // 在组件实例被从页面节点树移除时执行
      },
    },

组件所在页面的生命周期

Component({
  pageLifetimes: {
    show: function() {
      // 页面被展示
    },
    hide: function() {
      // 页面被隐藏
    },
    resize: function(size) {
      // 页面尺寸变化
    }
  }
})