1. グローバル変数を使用してデータを渡す

ヒント: app.jsで globalData を使用してデータをグローバル変数として保存し、使用する必要があるページでgetApp().globalData を介してデータを取得します。

// 步骤一：在全局app.js文件中定义数据
App({
  globalData: {
    userName: '全局变量传值',
  }
})

// 步骤二：获取应用实例，不然无法调用全局变量
const app = getApp()

// 步骤三：调用全局变量
Page({
  data: {
  
  },
  onLoad: function (options) {
    console.log(app.globalData.userName);
  },
})

2. データのローカル保存と送信

ヒント: WeChat アプレットが提供するローカルストレージwx.setStorageSync およびwx.getStorageSync を 使用して、値を転送します。

　设值：wx.setStorageSync('title', title)
　取值：var title=wx.getStorageSync('title')

3. ルーティングを使用してデータを転送する

移行：

// 跳转的同时携带数据拼接在URL后面，跳转到的页面利用onLoad()方法的参数options即可获取到传递的参数
wx.navigateTo({
     url: `跳转路由?data=${data}`,
})

買収：

onLoad(options){
    console.log(options)
}

注: オブジェクト型のデータが渡された場合、別のページに移動してそれを取得すると、それが "[object, object]" であることがわかります。解決策は、JSON.stringify() および JSON.parse() を使用することです。

移行：

const data = JSON.stringify(this.data);
wx.redirectTo({
   url: `跳转url?data=${data}`
})

買収：

onLoad(options){
    const data = JSON.parse(JSON.stringify(options.data));
}

4. 親コンポーネントと子コンポーネント間の値の受け渡し

親から子へ属性绑定の値の受け渡しは、子コンポーネント内の properties オブジェクトを使用して、親コンポーネントによって渡された値を受け取ります
子が親に値を渡すと、親コンポーネントは自定义事件カスタムイベントを介して 事件对象e 子コンポーネントから渡された値を受け取ります。

親から子へ値を渡す

サブコンポーネントを保持するフォルダーを作成します。フォルダーの下にサブコンポーネントを作成します。任意の名前で作成できます。ここに作成されます。 componentscomponents childchild

作成後、導入され、子组件 child インポートされます父组件 index 。ここで説明すると、この場合、 node の下のルーティングページと node の下のコンポーネントの 2 つのページが作成されます。 pages index components child

//在父组件的 json 文件中的 usingComponents节点下 引入
{
  "usingComponents": {
    "child":"../../components/child/child"
  }
}

子コンポーネントのコンテンツを親コンポーネントにレンダリングする

コンポーネントに付けられたカスタム名は、 child レンダリング時にタグのセットを書き込むためのものです index 父组件 <child><child>

親コンポーネント

<child name="{
   
   { name }}" age="{
   
   { age }}" ></child>


export default{
    data(){
        return{
            name:"老五",
            age:50
        }
    }
}

サブアセンブリ

<view>
  这是父组件传递过来的值 name: {
   
   { name }}-----age {
   
   {age}}
</view>
  

// 接受父组件传递过来的值
  properties: {
    name:{
      type:String,
      value:'我是默认值：哈哈'
    },
    age:{
      type:Number,
      value:'我是默认值： 100'
    }
  },

子から親に値を渡す

サブアセンブリ

WXML

<!-- 点击按钮向父组件传值 -->
<button bindtap="send">点击按钮向父组件传值</button>


  data: {
    msg:'我是子组件的值'
  },
    
  methods: {
    send(){
      this.triggerEvent('send',this.data.msg)
    }
  },

親コンポーネント

親コンポーネントでこのカスタムイベントを定義しますbindsend="send"

WXML

<child  name="{
   
   { name }}" age="{
   
   { age }}" bindsend="send"></child>

 // 父组件接受子组件传递过来的值
  send(e){
    console.log(e.detail);
  }

WeChatミニプログラムのいくつかの価値移転方法

1. グローバル変数を使用してデータを渡す

2. データのローカル保存と送信

3. ルーティングを使用してデータを転送する

4. 親コンポーネントと子コンポーネント間の値の受け渡し

おすすめ