使用mpvue开发小程序差不多整整一周了。在此总结一下使用过程遇到的一些坑和比较特别的用法。
mpvue不支持在组件上定义v-show
这一点官方文档也有提到并建议使用v-if
代替。但v-if
与v-show
有一个最大的不同就是,v-if
的切换过程,实际上有子组件的销毁和重建。而v-show
只是简单的通过display这个CSS属性进行切换。
这个不同带来的影响是:如果在组件的生命周期里定义了一些操作,并使用v-if
代替v-show
,每一次切换都会触发执行这些生命周期函数中的操作。而与我们想使用v-show
的本意不同(v-show只在初次渲染时触发执行一次)。
解决办法:
(1)将父组件中一个Boolean类型的属性通过prop传递给子组件
(2)在子组件的最顶级元素上设置display属性
(3)通过父组件传来的prop控制display属性值的切换(三目运算符)
(4)在父组件中修改这个Boolean类型的属性的值来实现子组件的显示和隐藏
//father.vue
<template>
<div>
<my-child :is-show="isShow"></my-child>
<button @click="changeShow">显示/隐藏</button>
</div>
</template>
<script>
import MyChild from "./child.vue";
export default {
components: { MyChild },
data() {
return { isShow: false };
},
methods: {
changeShow() { //点击按钮,将isShow的值取反
this.isShow = !this.isShow;
}
}
//child.vue
<template>
<div :style="{ display: isShow ? 'block' : 'none' }">
//如果父组件传递的prop值改变,则display的值也改变
<span>hi!</span>
</div>
</template>
<script>
export default {
props: {
isShow: { type: Boolean }
}
}
</script>
mpvue中新增页面的步骤
(1)新建一个文件夹,并且在文件夹下新建index.vue
、main.js
、main.json
。main.js的内容复制之前的就好。main.json是对页面的配置。
(2)在项目src/app.json中的pages
或subpackages
字段中添加新增页面的路径。之前我没有做一步,结果配置的页面标题无效,标题栏是空的。
(3)重新npm run dev
mpvue不支持ref
有一次想使用ref
访问子组件的方法,但父组件的$ref属性始终是空的。后来查了mpvue在GitHub的上issue得知,还不支持ref
。目前还没有找到好的解决办法。
页面数据的问题
从页面X返回页面Y,然后再从页面Y进入页面X时,页面X中数据属性依然存在。如果想确保每次进入页面时数据属性都是空的,可以onLoad中手动清空或重置。
设置radio组件的大小
为小程序中的radio组件设置width
和height
属性不会改变radio的大小。而使用:
transform: scale(0.8); //0.8是它的缩放比例,0.几都可以
只有一个radio时,选中后无法取消
radio单选按钮组件只有一个时,选中后就取消不了。
原因:radio单选按钮本身导致,它本身的特性就是必须保持一个选中。
解决办法:
(1)将radio的checked
属性绑定到一个Boolean类型的数据属性上。
(2)监听radio的click
事件,当点击radio时,将绑定的Boolean类型的属性值取反。以实现改变radio选中状态的效果。
<radio-group @click="changeChecked">
<radio :checked="isChecked"></radio>
<span>是否选中</span>
</radio-group>
export default {
data() {
return { isChecked: false }
},
methods: {
changeChecked() {
this.isChecked = !this.isChecked;
}
}
}