wepy 父调用子组件方法_wepy踩坑小记（一）

前言

最近在用wepy，相对于之前用的taro，由于自己没有怎么写过vue，虽然也是很容易就上手了，但是有擦坑啦。

复选框值绑定

在wepy官方文档是这样说的：

用法与 Vue 一致，参考 vue官方文档https://wepyjs.github.io/wepy-docs/2.x/#/base/form

vue官方文档是这样的

然后我也是这样用的，在静态页面上，完全没问题啊，后来把表单改成组件之后,死活不行。

    {{item.text}}

网上也不到解决方案，只能一点点排查。后来在看终端输出时，看到这么一句话

// 大致意思如下checkbox不支持v-mode，请使用checkbox-group

于是改成这样

            {{item.text}}

ok，完美。

温馨提示：

1. 这个warning只有在直接输出checkbox的时候才会提示，用v-for循环输出的没有这个warning，并且时有时没有。超级坑。

2. 要留意控制台的warning

watch

业务场景如下：子组件的qitem属性是父组件传过去的，但是子组件需要修改qitem的值并且回传给父组件。

解决方案：

把qitem赋值给子组件的内部属性questionItem，然后配合watch，当questionItem发生改变时，在emit出去通知父组件。

具体伪代码如下：

* 父组件

:qitem="item" :index="index" @update="update" :isTextOnly="hasFilled" >

// jsmethods: { update(item) { // 业务代码 }}

* 子组件

wepy.component({    props: {        qitem: {},    },    data: {        questionItem: {},    },    watch: {        qitem: {            handler(val) {                this.questionItem = Object.assign({}, this.questionItem, val);            },            deep: true,        },        'questionItem.answer': {            handler (val) {                this.$emit('update', val);            },            deep: true,        },    },})

使用watch时需要注意，当你watch的对象是一个数组时，这个对象改变的时候，可能会监听不到。这里有坑，注意。

结语

vue写法还是用法想对于react来说，都简单很多，虽说对新手友好，但是也会有坑，感谢大佬帮忙。

自律使人自由。加油。

以往文章

wepy与colorui的那些事儿

一行命令让你的视频无处可逃

Javascript正则表达式(?!，?=，?:)扫盲

2分钟教你实现环形/扇形菜单基础版

JS执行流程简述(一)

wepy 父调用子组件方法_wepy踩坑小记（一）相关推荐

wepy 父调用子组件方法_微信小程序wepy框架笔记小结
该框架是腾讯内部基于小程序的开发框架,设计思路基本参考VUE,开发模式和编码风格上80%以上接近VUE 优势组件化开发小程序虽然有标签可以实现组件复用,但仅限于模板片段层面的复用,业务代码与交互 ...
钉钉小程序父组件调用子组件方法（钉钉小程序踩坑实录）
钉钉小程序父组件调用子组件方法页面到底部,父组件触发,调用子组件的方法,加载子组件的数据解决方法子组件里: didMount() {this.$page.childComponent = thi ...
vue 踩坑--父组件调用子组件方法，报错
父组件,调用子组件的方法,报如下错误分析解决:1.可能子页面加载未完成,父组件调用子组件方法加延时处理 setTimeout(() => {this.$refs.notice.getInfo( ...
vue 父循环怎么拿子循环中的值_Vue 父组件循环使用refs调用子组件方法出现undefined的问题...
Vue 父组件循环使用refs调用子组件方法出现undefined的问题 1. 背景最近前端项目遇到一个问题,我在父组件中使用了两个相同的子组件child,分别设置ref为add和update.其中 ...
react 父组件调用子组件方法--通过 props 实现
父组件中 // 引入子组件 import GlobalTable from '../globalComponents/global-table'export default class Assuran ...
react 函数组件父组件调用子组件方法
react 函数组件父组件调用子组件方法父组件利用ref对子组件做标记,通过调用子组件方法更改子组件状态,也可以调用子组件方法首先在父组件中 ,使用useRef创建一个ref import Log ...
vue 父组件调用子组件方法ref
一.ref被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的$refs对象上 vue中如果父组件想调用子组件的方法,可以在子组件中加上ref,然后通过this.$refs.ref.metho ...
react父组件调用子组件方法
前期我们说了父子组件互相通过props传递数据的方法,这个应该都可以理解. 其实今天说的这个父组件直接调用子组件方法, 也类似. 先看代码,比较直观. import React, {Componen ...
VUE3.X——父组件调用子组件方法
子组件  <template><telepor ...

wepy 父调用子组件方法_wepy踩坑小记（一）

wepy 父调用子组件方法_wepy踩坑小记（一）相关推荐

最新文章

热门文章