您的位置:首页 > 教程 > JavaScript > 微信小程序中实现双向绑定的实战过程

微信小程序中实现双向绑定的实战过程

2023-01-19 10:07:32 来源:易采站长站 作者:

目录一、双向绑定1.vue2中双向绑定实现2.vue3中双向绑定实现3.小程序中简易双向绑定二、问题三、方案总结一、双向绑定在微信小程序中如何实现双向绑定?在开始之前先介绍下什么是双向绑定,js...

目录
一、双向绑定
1. vue2中双向绑定实现
2. vue3中双向绑定实现
3. 小程序中简易双向绑定
二、问题
三、方案
 总结

一、双向绑定

在微信小程序中如何实现双向绑定?在开始之前先介绍下什么是双向绑定,js中定义变量数据后,通过{{}}绑定到模板中,这个过程是单向绑定,即数据的更新只能是js中更新了数据,模板中跟着修改。但是如果模板中修改数据的话,js中对应的变量数据也跟着www.cppcns.com修改则为双向绑定。

1. vue2中双向绑定实现

form元素绑定:

官网说明:https://v2.cn.vuejs.org/v2/api/#v-model

主要通过v-model指令实现数据的双向绑定,实例如下:

<!-- 当选中时,`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">

<!-- 当选中第一个选项时,`selected` 为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

自定义组件绑定:

官网说明:https://v2.cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model

通过v-model进行绑定,组件中需要声明change事件以及value 的prop,数据发生变化时通过:$emit(‘change’, value)的方式实现数据变动的通知,value 的prop用于接收父组件更新参数。

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。

具体实例如下:

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

使用的时候通过v-model进行绑定:

<base-checkbox v-model="lovingVue"></base-checkbox>

2. vue3中双向绑定实现

form元素绑定:

官网说明:https://v2.cn.vuejs.org/v2/guide/forms.html

vue3中表单元素的绑定类似于vue2,具体可参考上述链接。

你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更http://www.cppcns.com新数据,并对一些极端场景进行一些特殊处理。

自定义组件绑定:

官网说明:https://cn.vuejs.org/guide/components/events.html#usage-with-v-model

类似vue2中的使用方式,但是有个区别是事件时‘update:modelValue’,接收的参数是’modelValue’,和vue2不太一样。

要让这个例子实际工作起来, 组件内部需要做两件事:

将内部原生 input 元素的 value attribute 绑定到 modelValue prop输入新的值时在 input 元素上触发 update:modelValue 事件

3. 小程序中简易双向绑定

官网说明:https://developers.weixin.QQ.com/miniprogram/dev/framework/view/two-way-bindings.html

双向绑定时只能使用单一字段绑定,复杂的对象无法绑定:

用于双向绑定的表达式有如下限制:

只能是一个单一字段的绑定,如
<input model:value="值为 {{value}}" />
<input model:value="{{ a + b }}" />
都是非法的;

目前,尚不能 data 路径,如
<input model:value=&javascriptquot;{{ a.b }}" />
这样的表达式目前暂不支持。

组件中更新数据需要通过this.setData进行更新,另注意绑定value的类型一定要对应,不然触发不了双向绑定数据的更新。

简单绑定实例如下:

父组件

<child model:value="{{value}}"></child>
Page({
/**
 * 页面的初始数据
 */
data: {
value: '测试1'
},
})
{
  "usingComponents": {
  "child":"/components/test/child"
  }
}

子组件

<view>value内容:{{value}}</view>

<button bindtap="updateValue">更新数据</button>
Component({
/**
 * 组件的属性列表
 */
properties: {
value: String
},

/**
 * 组件的初始数据
 */
data: {

},

/**
 * 组件的方法列表
 */
methods: {
updateValue() {
this.setData({
value: '测试222'
});
}
}
})

二、问题

如果微信小程序中绑定的value是一个对象,使用双向绑定时会出现堆溢出的异常:

父组件:

Page({
/**
 * 页面的初始数据
 */
data: {
value: {
id: 1,
name: '测试1'
}
},
})
<child model:value="{{value}}"></child>

子组件:

/**
 * 组件的属性列表
 */
properties: {
value: Object
},

/**
 * 组件的初始数据
 */
data: {

},

/**
 * 组件的方法列表
 */
methods: {
updateValue() {
this.setData({
value: {
id: 2,
name:'测试'
}
});
}
}
<view>value内容:{{value}}</view>

<button bindtap="updateValue">更新数据</button>

异常:

VM414 WAService.js:1 RangeError: Maximum call stack size exceeded
    at Function.i.safeCallback (VM414 WAService.js:1)
    at l.<anonymous> (VM414 WAService.js:1)
    at c.doUpdates (VM414 WAService.js:1)
    at $n (VM414 WAService.js:1)
    at fi (VM414 WAService.js:1)
    at gi (VM414 WAService.js:1)
    at fi (VM414 WAService.js:1)
    at Di._updateValues (VM414 WAService.js:1)
    at Di.updateValues (VM414 WAService.js:1)
    at c._updateCb (VM414 WAService.js:1)

具体如下:

微信小程序中实现双向绑定的实战过程

三、方案

可将对象通过JSON.stringify转换为字符串进行绑定,子组件如果需要使用对象时,使用JSON.parse进行转换即可,具体实例如下:

父组件

<child model:value="{{value}}"></child>
Page({
/**
 * 页面的初始数据
 */
data: {
value: JSON.stringify({
id: 1,
name: '测试1'
})
},
})

子组件

<view>value内容:{{value}}</view>

<button bindtap="updateValue">更新数据</button>
// components/test/child.js
Component({
/**
 * 组件的属性列表
 */
properties: {
value: String
},

/**
 * 组件的初始数据
 */
data: {

},

/**
 * 组件的方法列表
 */
methods: {
updateValue() {
this.setData({
value: JSON.stringify({
id: 2,
name:'测试222'
})
});
}
}
})

 总结

到此这篇关于微信小程序中实现双向绑定的文章就介绍到这了,更多相关微信小程序双向绑定内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

如有侵权,请发邮件到 [email protected]

相关文章

  • vue跳转页面的几种方法(推荐)

    vue跳转页面的几种方法(推荐)

    vue跳转不同页面的多种方法 1:router-link跳转 !-- 直接跳转 --router-link to='/testDemo' button点击跳转2/button/router-link !-- 带参数跳转 --router-link :to="{path:'testDemo',query:{setid:123456}}" button点击跳转
    2020-03-26
  • Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除

    Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除

    最近有使用vue+elementUI实现多图片上传的需求,遂做此纪录。 本次主要写一下前端的实现细节,至于后台以Multipart[ ]数组接收即可,不再赘述,网上一搜大把文章可供参考。 本次使用
    2020-03-23
  • 微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能

    微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能

    上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面 view class='page_row' bindtap="suo" view class="search" view class="df search_arr" icon class="searchcion" size='20' type='search'/
    2020-03-10
  • 微信小程序实现canvas分享朋友圈海报

    微信小程序实现canvas分享朋友圈海报

    本文实例为大家分享了微信小程序分享朋友圈海报的具体代码,供大家参考,具体内容如下 思路:生成朋友圈海报放在公共文件,首先需要绘制canvas,点击分享朋友圈按钮,在手机屏幕
    2020-06-21
  • 详解ES6 Modules

    详解ES6 Modules

    当下, 我们几乎所有的项目都是基于 webpack、rollup 等构建工具进行开发的,模块化已经是常态。 我们对它并不陌生,今天,我们就再系统的回顾一下ES6的模块机制, 并总结下常用的操
    2020-07-04
  • Vue-router 报错NavigationDuplicated的解决方法

    Vue-router 报错NavigationDuplicated的解决方法

    版本:3.1.x 报错原因: 使用push()、replace()进行导航时,不能重复导航到当前路由。 解决办法: 方法1:在定义路由的文件中router/index.js const originalPush = VueRouter.prototype.pushVueRouter.protot
    2020-03-31
  • vue使用better-scroll实现滑动以及左右联动

    vue使用better-scroll实现滑动以及左右联动

    本文实例为大家分享了vue实现滑动以及左右联动效果的具体代码,供大家参考,具体内容如下 一、首先需要在项目中引入better-scroll 1. 在package.json 直接写入 "better-scroll":"^1.15.1" 版本以
    2020-06-30
  • Vue如何提升首屏加载速度实例解析

    Vue如何提升首屏加载速度实例解析

    在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将会相当的大,影响
    2020-06-25