微信小程序的五种传值方式

Posted 2023-03-31 小野猫子

1、使用全局变量传递数据

利用app.js 中的 globalData 将数据存储为全局变量，在需要使用的页面通过getApp().globalData获取数据

app.js

App(
    globalData:
        data:  name: 'demo' 
    
)

使用组件

let app = getApp()

app.globalData.data

2、使用本地存储数据传递

使用小程序提供缓存

同步缓存：wx.setStorageSync 与 wx.getStorageSync 

异步缓存：wx.setStorage 与 wx.getStorage

移除本地缓存：wx.removeStorageSync（同步）、wx.removeStorage（异步）

// 将数据存储在本地缓存中指定的 key 中
wx.setStorgaeSync('data','hello')

// 从本地缓存中同步获取指定 key 的内容
wx.getStorageSync('data')

// 从本地缓存中移除指定 key
wx.removeStorgae('data')

3、使用路由传递数据

传递组件

wx.navigateTo(
  url: 'test?id=1',
  success: (res)=> 
    // 通过 eventChannel 向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage',  data: 'test' )
  
)

使用组件

Page(
  onLoad: function(option)
    console.log(option.query)
    // 监听 acceptDataFromOpenerPage 事件，获取上一页面通过 eventChannel 传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', (data)=> 
      console.log(data)
    )
  
)

4、父子组件使用selectComponent('#页面id')，triggerEvent('方法名'，'值')

<view id='demo' bind:returnDate='handleReturnDate'><view>

Page(
      
    handleData(data)
       this.selectComponent("#demo").showModal(data);
    
    // 子组件传递过来的值
    handleReturnDate(data)
         console.log(data)
    
)

Component(
    
    methods:
        // 父组件传递过来的数据
        showModal(data)
            console.log(data)
        ,
        submit()
            // 子组件传递数据给父组件
           this.triggerEvent("returnDate", sportsGuidance);
        
    
)

5、子组件通过properties接收：

父组件parent

parent.wxml

<view>
    <child :name='jack'></child>
</view>

parent.json

 
    "usingComponents": 
        "child":"/child/child",
    ,
    "navigationBarTitleText": "父组件的导航标题"

子组件 child

child.wxml

<view>
    父组件传递过来的name:name
</view>

child.js

Component(
    // 接受父组件传递过来的属性
    properties:
        name:String //简化的定义方式

        //name:
            //type:String,
            //value:''
        //
    ,
    // 私有数据，可用于模板渲染
    data:,

    // 组件生命周期声明对象
    lifetime:

    ,
    
   // 组件所在页面的生命周期声明对象
    pageLifetimes:

    ,

    // 事件响应函数和任意的自定义方法
    methods:
    
)

具体其他的属性和使用方法，详见小程序官网Component(Object object) | 微信开放文档

vue组件之间的五种传值方法(父子兄弟跨组件)

一、props/$emit父子组件传值：

父传子 (自定义属性 props)

父组件向子组件传参，通过自定义属性的方式进行传参，在子组件中使用prop定义自定义的属性，然后在父组件中通过v-bind指令把需要传递的数据绑定在子组件上，那在子组件中props里面的自定义属性可以直接使用。

//父组件代码   渲染子组件
<Son  :name="name" />

 // 子组件代码，接受父参数
export default 
  props: 
    name:
                type:String,
                default:"我是默认字符串"//定义参数默认值
                required:false//定义参数是否必须值
            
  

子传父 (自定义事件 this.$emit)

子组件向父组件传数据使用自定义事件， vue 组件提供了一个emit(‘自定义事件名’， 传递的数据) )，子组件传递数据时，触发响应的事件函数，就会自动触发通过$emit给父组件绑定的自定义事件，自定义事件接受一个参数，参数就是子组件传递过来的数据。

// 父组件代码，渲染子组件
<Son   @setValue="valueFn" />
export default
  method:
    valueFn(value) 
  

// 子组件代码
this.$emit('setValue', this.say)

二、ref与parent/children父子组件传值:

父传子

//父组件
<Home ref="home"></Home>
<button @click="toValue">点击</button>
methods:
  toValue()
          this.msg = "这是父组件的值";
          this.$refs.home.setMsg(this.msg);
   

//子组件
<div class="home">
      msg
 </div>
    methods:
        setMsg(val)
            this.msg = val;
        
    

子传父（如果子组件是公共组件，需判断父组件是否具有该方法）

//父组件
<Home ref="home"></Home>
methods:
  toValue(val)
          this.msg = val
        
   

//子组件
<div class="home">
<button @click="setMsg">点击</button>
 </div>
    methods:
        setMsg(val)
             this.$parent.toValue(this.msg);
        
    

三、兄弟之间传参

兄弟组件之间的数据传递，通过eventBus来做中间的桥梁，传输方通过中间组件调用 emit 传数据，接收方通过on 接受数据，两者之间的自定义属性名保持一致。

// 传输方组件调用方式
import Bus from '@/EventBus.js'
Bus.$emit('pass-value', this.say);

// 接收方接受参数
import Bus from '@/EventBus.js'

created() 
  Bus.$on('pass-value', val => 
     this.sibilingValue = val;
  )

四 $attrs/$listeners隔代组件传值（爷孙组件参数互传）

• $attrs
  1.包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外);
  2.当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind=“$attrs” 传入内部组件。通常配合 interitAttrs 选项一起使用。
• $listeners
  1.包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。
  2.它可以通过 v-on=“$listeners” 传入内部组件。
• 简单来说：$attrs 与$listeners是两个对象，$attrs 里存放的是父组件中绑定的非 Props 属性，$listeners 里存放的是父组件中绑定的非原生事件。

爷传孙（$attrs）

    //爷组件
    <div id="app">
      <Home :msg="msg"></Home>
    </div>
    //父组件(父组件的操作最简单，但不做就会传不过去)

    <div class="home">
      <Sun v-bind="$attrs"></Sun>
    </div>
    //孙组件

    <div class="sun">
       msg 
    </div>
    //props直接接受 
    props: msg:String, 

孙传爷（$listeners）

    //爷组件
    <div id="app">
      <Home @setVal="setVal">></Home>
    </div>
    methods: setVal(val) this.msg = val;  
    //父组件(父组件的操作最简单，但不做就会传不过去)

    <div class="home">
      <Sun v-on="$listeners"></Sun>
    </div>

    //孙组件
    <div class="sun">
      <button @click="toVal">点我</button>
    </div>
    methods: toVal() this.$emit("setVal",this.msg)  

五、通过Vuex数据共享

通过Vuex存储数据， Vuex是一个专为vue.js 应用程序开发的状态管理模式， 它采用集中式存储管理数据，以相应的规则保证状态以一种可预测的方式发生改变， 一变全变，同步更新数据。

// 注册代码
const store = new Vue.Store(
  state:
    count: 100
  ,
  mutations: 
    addCount(state, val = 1) 
      state.count += val;
    ，
    subCount(state, val = 1) 
      state.count -= val;
    
  
)

// 组件调用
this.$store.commit('addCount');  // 加 1
this.$store.commit('subCount');  // 减 1