Value transfer method between components in mini program development (code example)

The content of this article is about the value transfer method (code example) between components in the development of small programs. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .

1. Create a component

Open the WeChat developer tools and create a component. Four files will be generated: wxml, wxss, js, json

In wxml:

<view>我是组件A</view>

In js:

Component({

  behaviors: [],

  properties: {
   
  },
  data: {
  
  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {
   
  }

})

In json:

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

That is, the component creation is completed

2.Introduce the component

To index If the component is introduced in index.json:

{
  "usingComponents": {
    "componentA": "../../components/child1/child1"
  }
}

In index.wxml:

<view>
    <view>微信小程序组件传参</view>
    <componentA />
</view>

, then the component can be displayed. To import the component, you must first Define the component in json before it can be displayed in wxml

3. Parent component passes parameters to child component

Declaration: A component is the parent component, and B component is the child component, as follows Component A passes parameters to component B:

Introduce component B into component A

Write in the json of component A:

{
  "component": true,
  "usingComponents": {
    "componentB": "../child2/child2"
  }
}

In the wxml of component A, write:

<view>我是组件A</view>

   子组件内容：
   

In the js of component B, write:

Component({

  behaviors: [],

  properties: {
    paramAtoB:String
  },
  data: {

  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {

  }

})

That is, define the parameter type to be passed by component A in properties

Write in the wxml of B component:

<view style=&#39;border:2px solid gray;&#39;>
<view style=&#39;text-align:center;&#39;>我是组件B</view>
<view>A中传入的参数：{{paramAtoB}}</view>
</view>

Summary:

A component passes parameters to B component. In fact, when B component is introduced into A component, it brings an attribute. paramAtoB, and assign a value to it, and then the B component obtains its value through this attribute name paramAtoB4. The child component passes parameters to the parent component

Statement: A component is the parent component, and B component As a sub-component, the following is how B component passes parameters to A component:

In order for the sub-component to pass parameters to the parent component, you must first add a trigger event when the parent component introduces the sub-component, as follows:

In parent component A wxml:

<view style=&#39;padding:20px;border:2px solid red;&#39;>
<view style=&#39;text-align:center;&#39;>我是组件A</view>
<view>
   <view>A组件内容：</view>
   <view>B组件传入参数：{{paramBtoA}}</view>
   <componentB paramAtoB=&#39;我是A向B中传入的参数&#39; bind:myevent="onMyEvent"/>
</view>

</view>

myevent is the bound trigger event

In parent component A js:

Component({

  behaviors: [],

  properties: {
   
  },
  data: {

  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {
    onMyEvent:function(e){
      this.setData({
        paramBtoA: e.detail.paramBtoA
      })
    }
  }

})

onMyEvent is the function when triggered by the sub-component

In sub-component B wxml:

<view style=&#39;border:2px solid gray;&#39;>
<view style=&#39;text-align:center;&#39;>我是组件B</view>
<view>A中传入的参数：{{paramAtoB}}</view>
  <button bindtap=&#39;change&#39;>向A中传入参数</button>
</view>

As soon as the button click event is triggered, You can pass in parameters into parent component A. In child component B, js:

Component({

  behaviors: [],

  properties: {
    paramAtoB:String
  },
  data: {

  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {
    change:function(){
      this.triggerEvent('myevent', { paramBtoA:123});
    }
  }

})

this.triggerEvent is the event executed after the button is clicked, triggering the myevent event. Pass in parameter paramBtoA into the parent component

Column
Li Sanzang
Article details

                                                                    

李三宗                                                                                                 posted on                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          Posted 2 days ago 【Small program development】Passing values ​​between components

Small program

                                                                                                 read                                                             It takes 10 minutes to read                                                                                                                        

##                                                                                                     

                                                                                                                                                                                                                                                                                                                                                                                  [Mini program development] Passing values ​​between components1. Create componentsOpen the WeChat developer tools, Creating a component will generate four files: wxml, wxss, js, json

In wxml:

<view>我是组件A</view>

In js:

Component({

  behaviors: [],

  properties: {
   
  },
  data: {
  
  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {
   
  }

})

In json:

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

That is, the component creation is completed

2. Introduce the component

To introduce the component into the index, then

In index.json:

{
  "usingComponents": {
    "componentA": "../../components/child1/child1"
  }
}

In index.wxml:

<view>
    <view>微信小程序组件传参</view>
    <componentA />
</view>

Then the component can be displayed. To introduce the component, you must first define the component in json before it can be displayed in wxml

3. Parent component passes parameters to child component

Declaration: A component is the parent component, and B component is the child component. The following is how component A passes parameters to component B:

In component A Introduce B component

Write in the json of A component:

{
  "component": true,
  "usingComponents": {
    "componentB": "../child2/child2"
  }
}

Write in the wxml of A component:

<view>我是组件A</view>

   子组件内容：
   

In the js of B component Write:

Component({

  behaviors: [],

  properties: {
    paramAtoB:String
  },
  data: {

  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {

  }

})

That is, define the parameter type to be passed from component A in properties Write in wxml of component B:

<view style=&#39;border:2px solid gray;&#39;>
<view style=&#39;text-align:center;&#39;>我是组件B</view>
<view>A中传入的参数：{{paramAtoB}}</view>
</view>

Summary:

A component passes parameters to B component. In fact, when the B component is introduced into the A component, it brings an attribute paramAtoB and assigns a value to it. Then the B component obtains its value through this attribute name paramAtoB.

4. Subcomponent passes parameters to parent component

Declaration: A component is the parent component, and B component is the subcomponent. The following is how B component passes parameters to A component:

To make To pass parameters from a child component to a parent component, you must first add a trigger event when the parent component introduces the child component, as follows:

In parent component A wxml:

<view style=&#39;padding:20px;border:2px solid red;&#39;>
<view style=&#39;text-align:center;&#39;>我是组件A</view>
<view>
   <view>A组件内容：</view>
   <view>B组件传入参数：{{paramBtoA}}</view>
   <componentB paramAtoB=&#39;我是A向B中传入的参数&#39; bind:myevent="onMyEvent"/>
</view>

</view>

myevent is the bound trigger event

In the parent component A, js:

Component({

  behaviors: [],

  properties: {
   
  },
  data: {

  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {
    onMyEvent:function(e){
      this.setData({
        paramBtoA: e.detail.paramBtoA
      })
    }
  }

})

onMyEvent is the function when triggered by the child component

In sub-component B, wxml:

<view style=&#39;border:2px solid gray;&#39;>
<view style=&#39;text-align:center;&#39;>我是组件B</view>
<view>A中传入的参数：{{paramAtoB}}</view>
  <button bindtap=&#39;change&#39;>向A中传入参数</button>
</view>

As soon as the button click event is triggered, parameters can be passed into parent component A. In sub-component B, js:

Component({

  behaviors: [],

  properties: {
    paramAtoB:String
  },
  data: {

  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {
    change:function(){
      this.triggerEvent('myevent', { paramBtoA:123});
    }
  }

})

this.triggerEvent is the event that is executed after the button is clicked, triggers the myevent event, and passes in the parameter paramBtoA into the parent component

• 

  report

You may be interested

Comment

                                                                                           Sort by time

Loading...Show more comments

The above is the detailed content of Value transfer method between components in mini program development (code example). For more information, please follow other related articles on the PHP Chinese website!