ホームページ  >  記事  >  ウェブフロントエンド  >  グローバル関数を使用して uniapp コンポーネント間でパラメーターを渡す方法

グローバル関数を使用して uniapp コンポーネント間でパラメーターを渡す方法

coldplay.xixi
coldplay.xixiオリジナル
2020-12-09 15:11:443973ブラウズ

グローバル関数を使用して uniapp コンポーネント間でパラメータを渡す方法: 1. パラメータを受け取るコンポーネントでグローバル関数をリッスンする; 2. パラメータを渡すコンポーネントにグローバル関数を登録する、コードは [uni.$emit( '関数名', パラメータ)] です。

グローバル関数を使用して uniapp コンポーネント間でパラメーターを渡す方法

このチュートリアルの動作環境: Windows7 システム、uni-app2.5.1 バージョン、Dell G3 コンピューター。

推奨 (無料): uni-app 開発チュートリアル

uniapp コンポーネント間でグローバル関数を利用する方法渡すパラメータの数:

1. パラメータを受け取るコンポーネントのグローバル関数をリッスンする

uni.$on('函数名',(形参数)=>{
...
});

2. パラメータを渡すコンポーネントのグローバル関数を登録する

uni.$emit('関数名', パラメータ)

コード例:

受信パラメータ:

<template>
<view>meme {{this.num}}</view>
</template>
<script>
export default{
data()
{
return{
num:12
}
},
created()
{
uni.$on(&#39;update&#39;,(num)=>{
this.num=num;
});
}
}
</script>
<style>
</style>

渡すパラメータ:

<template>
<view>
<button type="primary" @click="get">按钮</button>
<me></me>
</view>
</template>
<script>
import det from &#39;../detail/detail.vue&#39;
import me from &#39;../me/me.vue&#39;
export default{
data()
{
return{
imgArr:[&#39;a&#39;],
num2:11
}
},
components:{
det,
me
},
methods:{
get()
{
uni.$emit(&#39;update&#39;,this.num2);
}
}
}
</script>
<style scoped>
@import url("../css/a.css");
.box{
height: 375rpx;
width: 375rpx;
/* #ifdef H5 */
background-color: #4CD964;
/* #endif */
/* #ifdef APP-PLUS */
background-color: #007AFF;
/* #endif */
}
.box1{
background-color: #007AFF;
}
</style>

関連する無料学習の推奨事項: プログラミング ビデオ

以上がグローバル関数を使用して uniapp コンポーネント間でパラメーターを渡す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。