微信小程序component使用及自定义参数，子父组件方法调用

小程序中，我们有时候需要自己定义一些组件，方便我们使用，下面就讲解一下小程序中component的使用，以及互相调用方法及传递参数。
我们举个例子：在index页面定义一个叫my-button的组件。下面就动手起来吧。

1.创建component，取名为my-button，在index.json文件夹下面引入自定义的组件

1.png

2.在my-button组件中自定义我们的属性。

在这里我们就定义一个属性，button的文字

//在properties里面定义我们要的属性
 properties: {
    btText: {//btText表示我们属性的名字
      value: '默认值',//value表示默认值
      type: String   //type是我们定义的类型，这里是String字符串类型
    }
  },

3.在index页面中调用我们的自定义的my-button组件。

<view class="container">
  <my-button btText='自定义按钮'/>//my-button就是我们自定义组件的名字-----btText就是我们属性的名字
</view>

4.在index中调用my-button里面的方法。

首先我们在自定义的my-button里面定义一个 方法，如下定义一个showLog方法：

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    btText: {
      value: '默认值',
      type: String
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    //my-button的方法
    showLog:function(){
      console.log("我是自定义button的log")
    }

  }
})

然后在index里面我们加一个按钮，点击一个按钮去调用my-button里面的方法，并且我们要给自定义的button加一个id

<!--index.wxml-->
<view class="container">
  <button bindtap='hahaTap'>哈哈</button>//加了一个按钮点击后去调用自定义按钮里面的方法
  <my-button id='myBtn' btText='自定义按钮' />    //加一个id
</view>

我们在index.js里面获取我们的自定义的button

const app = getApp()

Page({

  data: {

  },

  onLoad: function() {
    //通过id获取组件component
    this.myButton = this.selectComponent("#myBtn")
  },

  /**
   * 按钮点击事件,去调用自定义组件里面的方法
   */
  hahaTap: function() {
    //showLog是自定义组件我们定义的方法名
    this.myButton.showLog();
  }

})

然后我们就可以看见showLog()方法被调用后的log输出了

2.png

5.在my-button中调用index里面的方法。

我们在index.js里面建一个方法

indexFunction:function(){
    
  }

在my-button里面给按钮加一个点击事件，点击后调用index里面的indexFunction方法

 methods: {
    //my-button的方法
    showLog:function(){
      console.log("我是自定义button的log")
    },

    /**
     * 自定义按钮的点击事件
     */
    clickTap:function(){

    }
    
  }

我们给自定义按钮加了个点击事件clickTap方法，点击后触发这个方法去掉用index里面的indexFunction();
下面需要我们在index布局的自定义控件button去加一下我们的bind方法

3.png

然后我们在自定义按钮点击方法中去调用index里面的方法

my-button.js里面的method

/**
   * 组件的方法列表
   */
  methods: {
    //my-button的方法
    showLog:function(){
      console.log("我是自定义button的log")
    },

    /**
     * 自定义按钮的点击事件
     */
    clickTap:function(){
      this.triggerEvent('indexFunction')
    }

  }

index.js

const app = getApp()

Page({

  data: {

  },

  onLoad: function() {
    //通过id获取组件component
    this.myButton = this.selectComponent("#myBtn")
  },

  /**
   * 按钮点击事件,去调用自定义组件里面的方法
   */
  hahaTap: function() {
    //showLog是自定义组件我们定义的方法名
    this.myButton.showLog();
  },

  indexFunction:function(){
    console.log("index里面的方法被调用了")
  }

})

4.png