I’ve been developing applets with MPvue for almost a week. Here is a summary of some of the pitfalls and special uses encountered.

Mpvue does not support defining V-shows on components

This is also mentioned in the official documentation and v-if is recommended instead. However, one of the biggest differences between V-IF and V-show is that the switching process of V-IF actually involves the destruction and reconstruction of child components. V-show simply toggles through the display CSS property. The impact of this difference is that if some operations are defined in the lifecycle of the component and v-if is used instead of V-show, each switch triggers the execution of those operations in the lifecycle functions. Unlike our intention to use V-show (which only triggers execution once on the first render). Solutions: (1) Pass a Boolean property from the parent to the child via prop. (2) Set the display property on the top element of the child. (3) Switch the display property value from the parent via prop. (ternary operator) (4) Modify the value of this Boolean property in the parent component to show and hide the child component

//father.vue
<template>
  <div>
    <my-child :is-show="isShow"></my-child>
    <button @click="changeShow"> Show/hide </button> </div> </template> <script> import MyChild from"./child.vue";
export default {
  components: { MyChild },
  data() {
    return { isShow: false };
  },
  methods: {
    changeShow() {// click the button to change the value of isShow to the opposite this.isshow =! this.isShow; }}Copy the code
//child.vue
<template>
  <div :style="{ display: isShow ? 'block' : 'none' }"> // If the prop value passed by the parent component changes, the display value also changes. </span> </div> </template> <script>export default {
    props: {
      isShow: { type: Boolean }
    }
  }
</script>
Copy the code

Steps to add pages in MPvue

(1) Create a folder and create index.vue, main.js, and main.json under the folder. The contents of main.js will be copied as before. Main. json is the configuration of the page. (2) Add the path of the new page to the Pages or subpackages field of the project SRC /app.json. I didn’t do a step before, and the result is that the configured page title is invalid and the title bar is empty. (3) rerun NPM run dev

Mpvue does not support ref

Once I tried to access the child component’s methods using ref, but the parent component’s $ref property was always empty. Later, I checked the issue of MPvue on GitHub and learned that REF is not supported. No good solution has been found yet.

Page data issues

When you return from page X to page Y, and then from page Y to page X, the data attributes on page X still exist. If you want to ensure that the data attributes are empty every time you enter the page, you can manually clear or reset them in onLoad.

Sets the size of the Radio component

Setting width and height properties for the Radio component in the applet does not change the size of the radio. To use:

The transform: scale (0.8); //0.8 is its scale, 0Copy the code

If only one radio is selected, it cannot be cancelled

If the radio radio button has only one component, it cannot be cancelled after being selected. Reason: The Radio radio button itself, by its very nature, must keep one selected. (1) Bind the RADIO’s checked property to a Boolean data property. (2) Listen for the radio click event. When the radio is clicked, reverse the bound Boolean attribute value. To achieve the effect of changing the radio selected state.

<radio-group @click="changeChecked">
  <radio :checked="isChecked"></ span> </span> </radio-group>export default {
    data() {
        return { isChecked: false }
    },
    methods: {
        changeChecked() { this.isChecked = ! this.isChecked; }}}Copy the code