微信小程序传值的方法

微信小程序传值的方法

Vue中组件通讯的方式有很多种，每一种应用的场景可能都有一些不一样，我们需要在合适的场景下选择合适的通讯方式。
父子组件间通讯：props和emit、emit、parent、refs和refs和children、v-model
兄弟组件间通讯：事件总线、Vuex、localStorage
隔代组件间通讯：provide和inject
无相关组件间通讯：事件总线、Vuex、localStorage

1、本地存储（可以全局使用）

wx.setStorage({key:"key",data:"value"})
wx.setStorage({
key: "key",
data: "n多数据"
})

采用Storage进行存储，使用以下方法存储和读取：

wx.setStorageSync('token', {}) // 存取

let token = wx.getStorageSync('token') // 获取

wx.clearStorageSync() // 清空

2、全局app对象（可以全局使用）

const app = getApp()
app.datakey='sks';
 
const app = getApp()
var sks = app.datakey;
console.log(sks)

3、添加跳转路由

 wx.redirectTo({
    url:'/user/insuran/selectT?paySn='+res.data.omsOrderMasters[0].paySn+'&value='+res.data.payAmount
       });

4、通过链接传值（跳转页面传值）

<view>{{ msg }}<iew>
<button bindtap="clickMe">点击我<tton>
 
clickMe: function () {//点击事件
wx.navigateTo({
url: '../1111?id=1'//传值
})
this.setData({ msg: "Hello World" })
},
跳传页面接受值
onLoad: function (options) {
console.log('query',options)
}

5、 data-xxx || id(适合在本页面传值)

<button bindtap="clickMe" data-id='{{key}}'>点击我</button>//当然key在data中必须有值
<button bindtap="clickMe" id='{{key}}'>点击我</button>


var id = e.currentTarget.id;
var id = e.currentTarget.dataset.id;
console.log(id)

通过使用data - xxxx 的方法标识来传值

通过使用data - xxxx 的方法标识来传值，xxxx可以自定义取名 比my.wxml中的data-index。

如何获取data-xxxx传递的值？
在js的bindtap的响应事件中：
通过数据解析一层层找到数据，var id=e.target.dataset.index(根据你的data-id的取名)

注意：
状态管理只是会话存储，在应用未销毁的时候可以获取；一旦应用销毁，就不能从状态管理中获取
使用状态管理vuex(Vuex存储的数据是页面级的，小程序被杀死后数据就不存在了，如果想要数据存在，就应该使用本地存储Storage)

6、 使用 $emit 和 $on 兄弟组件传值、跨页面之间的数据传输

栗子：
一个组件内的按钮触发了兄弟组件的标签，从而播放背景音乐。另一个组件触发了暂停，从而暂停背景音乐。
这个时候就会用到$on和$emit了。
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发传递事件

$on('事件名字'); /监听事件，事件名字是 str型
$emit('事件名字',回调函数);//事件名字是 str型，当然，可以有多个事件名字，如果存在多个事件名字，那么就是用数组。

$emit

1、this.$emit（‘自定义事件名’,要传送的数据）；
2、触发当前实例上的事件，要传递的数据会传给监听器；

$on

1、vm.$on(‘事件名’,callback) —callback回调 $emit要传送的数据；
2、监听当前实例上自定义事件；
特别注意：e m i t 和 emit和emit和on的事件必须在一个公共的实例上，我们可以使用一个空的 Vue 实例作为中央事件总线。

  if (this.currentTab?.value === 'order') {
        uni.$emit('loadOrderList')
      }

 uni.$on('loadOrderList', () => {
      if (this.userData?.authentication) {
        this.getList() // 初始化订单列表
        this.tabscountlia() // 初始化订单未读数
      }
    })

vue1.0中 vm.$dispatch和vm.$broadcast 被弃用，改用$emit,$on。
父组件可以使用 props 把数据传给子组件；子组件可以使用 $emit触发父组件的自定义事件。vm.$emit( event, arg ) //触发当前实例上的事件；vm.$on( event, fn );//监听event事件后运行。