미니 프로그램 개발 시 컴포넌트 간 값 전달 방법(코드 예시)

이 기사는 작은 프로그램 개발에서 구성 요소 간의 값 전달 방법(코드 예제)에 대한 내용입니다. 필요한 친구들이 참고할 수 있기를 바랍니다. 당신.

1. 구성 요소 만들기

WeChat 개발자 도구를 열고 구성 요소 4개를 만듭니다: wxml, wxss, js, json

#🎜 🎜# wxml에서:

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

js에서:

Component({

  behaviors: [],

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

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

  methods: {
   
  }

})

json에서:

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

즉, 구성 요소가 생성됩니다

# 🎜🎜 #2. 구성 요소 소개

구성 요소를 인덱스에 도입하려면

이 index.json에 있습니다.

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

이 index.wxml에 있습니다. :

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

그런 다음 구성 요소를 표시하려면 먼저 json에서 구성 요소를 정의해야 wxml에 표시될 수 있습니다.

3.

명령문: 구성 요소는 상위 구성 요소이고 B 구성 요소는 하위 구성 요소로 다음은 A 구성 요소에서 B 구성 요소로 전달되는 매개 변수입니다.

#🎜 🎜#

in A 구성 요소에 B 구성 요소 추가

A 구성 요소의 json에 쓰기:

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

A 구성 요소의 wxml에 쓰기:

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

   子组件内容：
   

#🎜 🎜#구성요소 B의 js에 쓰기:

Component({

  behaviors: [],

  properties: {
    paramAtoB:String
  },
  data: {

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

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

  methods: {

  }

})

즉, 속성

Write의 구성요소 A에서 전달될 매개변수 유형을 정의합니다. 구성 요소 B의 wxml에서:

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

Summary:

구성 요소 A에서 구성 요소 B로 매개 변수를 전달한다는 것은 실제로 구성 요소 B가 구성 요소 A에 도입될 때 paramAtoB 속성을 가져오는 것을 의미합니다. 값을 할당하면 B 구성 요소는 이 속성 이름 paramAtoB

4를 통해 해당 값을 얻습니다. 하위 구성 요소는 매개 변수를 상위 구성 요소 Declaration에 전달합니다. 구성 요소는 상위 구성 요소이고 B 구성 요소는 하위 구성 요소입니다. 다음은 구성 요소 A에 매개 변수를 전달하는 구성 요소 B입니다.

하위 구성 요소가 상위 구성 요소에 매개 변수를 전달할 수 있도록 하려면 먼저 다음을 수행해야 합니다. 다음과 같이 상위 구성 요소가 하위 구성 요소를 소개할 때 트리거 이벤트를 추가합니다. #🎜 🎜#

상위 구성 요소 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는 다음과 같습니다. 상위 구성 요소 A의 js에 있는 바인딩된 트리거 이벤트

:

Component({

  behaviors: [],

  properties: {
   
  },
  data: {

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

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

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

})

onMyEvent는 하위 구성 요소에 의해 트리거될 때의 함수입니다.

하위 구성요소 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>

버튼 버튼 클릭 이벤트가 트리거되면 매개변수를 상위 구성요소 A에 전달할 수 있습니다. 컴포넌트 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는 버튼 클릭입니다. 이벤트가 실행된 후 myevent 이벤트가 트리거되고 paramBtoA 매개변수가 상위 컴포넌트

#🎜에 전달됩니다. 🎜 ## #####열#### ## ## #####李 Sanzang### ## #####기사 세부 사항#🎜🎜 ## ## ## ## ## ## ## ## ## ## ## 🎜 🎜 ## ## ## ## ## ## ##### ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 🎜🎜 # ~

리 삼장 ~                                               ~                                            ~ ~                                                                                      2일 전에 게시됨                                              12번 읽음                                                          읽는 데 10분 정도 걸립니다                                                 ~ ~ ~

                                                                                                                                                                                                                                                                                                       【미니 프로그램 개발】구성 요소 간 값 전송1. 구성 요소 만들기WeChat 개발자 도구를 열고 구성 요소를 만듭니다: wxml, wxss, js, json

In wxml In:

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

In js:

Component({

  behaviors: [],

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

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

  methods: {
   
  }

})

In json:

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

즉, 컴포넌트 생성이 완료되었습니다.

2 컴포넌트를 소개합니다.

index에서 컴포넌트를 소개한 다음 index에서

. json:

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

index.wxml에서:

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

구성 요소를 가져오려면 먼저 json에서 구성 요소를 정의해야 wxml

3에 표시될 수 있습니다. 하위 구성 요소

Statement: A 구성 요소는 상위 구성 요소이고 B 구성 요소는 하위 구성 요소입니다. 다음은 구성 요소 A에서 구성 요소 B로 전달되는 매개 변수입니다.

구성 요소 B를 구성 요소 A

에 작성합니다. 구성 요소 A의 json:

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

In A 구성 요소의 wxml에 다음을 작성합니다.

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

   子组件内容：
   

구성 요소 B의 js에 다음을 작성합니다.

Component({

  behaviors: [],

  properties: {
    paramAtoB:String
  },
  data: {

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

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

  methods: {

  }

})

즉, 속성의 구성 요소 A에서 전달될 매개 변수 유형을 정의합니다. 구성 요소 B의 wxml에 다음과 같이 작성합니다.

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

요약:

구성 요소는 B 구성 요소에 매개 변수를 전달합니다. 실제로 B 구성 요소를 A 구성 요소에 도입하면 paramAtoB 속성을 가져오고 B에 값을 할당합니다. 구성 요소는 이 속성 이름 paramAtoB를 통해 값을 얻습니다.

4 .Sub 구성 요소는 매개 변수를 상위 구성 요소에 전달합니다

선언: 구성 요소는 상위 구성 요소이고 B 구성 요소는 하위 구성 요소이며 다음은 A 구성 요소에 매개 변수를 전달하는 B 구성 요소입니다.

하위 구성 요소가 상위 구성 요소에 매개 변수를 전달하려면 먼저 구성 요소가 하위 구성 요소를 도입할 때 다음과 같이 트리거 이벤트를 추가해야 합니다.

상위 구성 요소 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는 바운드 트리거 이벤트

상위 컴포넌트 A js:

Component({

  behaviors: [],

  properties: {
   
  },
  data: {

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

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

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

})

onMyEvent 하위 컴포넌트

하위 컴포넌트 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>

버튼 클릭 이벤트가 트리거되면 함수입니다. , 하위 구성 요소 B js:

Component({

  behaviors: [],

  properties: {
    paramAtoB:String
  },
  data: {

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

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

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

})

에서 상위 구성 요소 A에 매개 변수를 전달할 수 있습니다. this.triggerEvent는 버튼을 클릭한 후 실행되는 이벤트이며, myevent 이벤트를 트리거하고 매개 변수 paramBtoA를 상위 구성 요소

• 

  Report

관심이 있으실 수도 있습니다

댓글

~ ~ 발진

위 내용은 미니 프로그램 개발 시 컴포넌트 간 값 전달 방법(코드 예시)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!