uniapp日常踩坑汇总

一、uni-app中u-radio-group和u-radio点击事件的区别

<u-radio-group v-model="hcData.hcqk" style="width: 100%;"
	 :disabled="disabled" @change="radioGroupChange">
		<u-radio v-for="(op, index) in options"
				@change="radioChange"
			 :key="index" :name="op.value" shape="circle">
				{{op.label}}
		</u-radio>
</u-radio-group>

1、u-radio-group中radioGroupChange:

    radioGroupChange(e){
   		console.log(e);//获取当前的选中情况，如未选中则是“”
   	},

2、u-radio中radioChange:

    radioChange(e){
   		console.log(e);//获取当前点击的按钮的值,点哪个显示哪个，不会有""的情况
   	},

二、@change="checkboxGroupChange(r,$event)

$event为子组件传递的值

三、props单向数据流

不要在子组件中修改，若在子组件中修改，会有警告，且watch不会触发，可用子组件变量接收，并通过$emit触发修改父组件的值

四、computed

计算属性中使用到的依赖项会自动追踪，如果是个对象的值就追踪整个对象（相当于自动watch），依赖项变更，计算属性也会重新计算，如果没变更就会使用缓存结果，也可以控制其不使用缓存，每次都重新计算
(补充：如果代码中都没有用到该computed属性，那么它的计算不会被触发，可以搭配watch来触发)

五、异步请求

父组件中mounted中调用异步请求，再把结果作为props传递给子组件，会有问题，要么用async/await控制同步（async返回一个promise对象），要么在子组件中发起请求

六、scroll-view滚动到指定位置

<scroll-view ref="scrollView" :scroll-into-view="focusId" class="dynamic-inspection_form" :scroll-with-animation="true" scroll-y>
	<view :id="id">
</scroll-view>

令focusId等于id即可滚动到该组件位置

七、uni.navigateTo(OBJECT)

框架中封装了uni.navigateTo(OBJECT)，传递参数时如果不用JSON.stringify(Object)序列化，则都会变成字符型（例如null变成了"null",true变成了"true"）

八、pdf

手机端无法像浏览器一样直接打开pdf，需要使用插件pdf.js

九、真机调试

调试发现真机上是先在外层调子组件的方法，再进行子组件的computed和watch，web则相反，故需要套一层$nextTick

十、vuex

分模块使用时，若要调用其它模块的变量，需要在action中使用rootState
vuex: dispatch=>actions=>commit=>mutations=>state

十一、动态组件component

可以和keep-alive标签搭配使用，效果类似v-show

十二、组件阻止冒泡

@click.stop不能直接用于组件，需要使用@click.native.stop

十三、v-bind绑定多个

<view v-bind="{key1: 'value1',key2: 'value2'}" />