第15课 微信小程序behavior组件间的数据共享：

先看看目录结构：

我们先编写一下两my-behavior的代码：

这里是my-behavior.js的代码：//behavior内还可以嵌套引入behavior

// my-behavior.js
//引入behaviors2就相当于把behaviors2里面的方法与数据都加到这里面
var myBehavior2 = require(my-behavior2)
module.exports = Behavior({
          
   
  behaviors: [myBehavior2],
  properties: {
          
   
    myBehaviorProperty: {
          
   
      type: String
    }
  },
  data: {
          
   
    myBehaviorData: 这是myBehavior内的数据
  },
  attached: function () {
          
    },
  methods: {
          
   
    myBehaviorMethod: function () {
          
   
      console.log(这是执行myBehavior内的方法)
    }
  }
})

这里是my-behavior2.js的代码：

// my-behavior2.js
module.exports = Behavior({
          
   
  behaviors: [],
  properties: {
          
   
    myBehaviorProperty2: {
          
   
      type: String
    }
  },
  data: {
          
   
    myBehaviorData2: 这是myBehavior2内的数据
  },
  attached: function () {
          
    },
  methods: {
          
   
    myBehaviorMethod2: function () {
          
   
      console.log(这是执行myBehavior内引入的myBehavior2中的方法)
    }
  }
})

下面是组件内代码：

组件component-tag-name.js内代码：

// components/component-tag-name.js
//引入behaviors 实现组件间代码共享
var myBehavior = require(my-behavior)
Component({
          
   
  behaviors: [myBehavior],  //挂载上Behavior即可使用其里面的方法与数据
  data: {
          
   
  	me: 这是组件自己递数据
  },
  methods: {
          
   
    
  }
})

组件component-tag-name.wxml内代码：

<!-- 组件模板 -->
<view>{
         
  {me}}</view>
<view>{
         
  {myBehaviorData}}</view>
<view>{
         
  {myBehaviorData2}}</view>
<button bindtap="myBehaviorMethod">点击执行myBehavior内方法</button>
<button bindtap="myBehaviorMethod2">点击执行myBehavior2内方法</button>

组件component-tag-name.json内代码：

{
          
   
  "component": true,
  "usingComponents": {
          
   }
}

index.wxml内直接写上组件：

先在index.json内引入组件：

{
          
   
  "usingComponents": {
          
   
    "my-component": "/components/component-tag-name"
  }
}

index.wxml写上即可

<!-- 引用组件的页面模版 -->
<my-component></my-component>

运行效果如下：