Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

I have recently collected some tips for using VUE. I hope that through my sharing, we can provide more problem-solving ideas in the development process and make Vue a handy tool for us.

Restrict prop property values to the options list

props:{
    name:{
        type:String
    },
    btnColor:{
        type:String,
        validator: s => ['blue','oranged'].includes(s)
    }
}
Copy the code

This validator function accepts a prop and returns true or false for whether the prop is valid or invalid. This function is often used when you need more options than booleans and want to limit the value range of prop. For example, button types or message types (info, success, Danger, warning) are some of the most common, and are good for color control, for example.

The complete code

App. Vue code

<template> <div> <h1> Component </h1> <m-button name=" button "btnColor="blue"/> </div> </template> <script> import MButton from './components/MButton.vue' export default { name: 'App', components: { MButton } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>Copy the code

MButton

<template>
    <button :style="{
        backgroundColor:btnColor,
        color:'white'
    }" >{{name}}</button>
</template>

<script>
    export default {
        name:'MButton',

        data(){
            return{
                info:{
                    textColor:'blue'
                },
                success:{
                    textColor:'green'
                }
            }
        },
        
        props:{
            name:{
                type:String
            },
            btnColor:{
                type:String,
                validator: s => ['blue','oranged'].includes(s)
            }
        }
    }
</script>
Copy the code

Custom slot default values

You can set the default content for slot in Vue.

<template> <button class="button" @click="$emit('click')"> <slot> <! Click me </slot> </button> </template>Copy the code

But a better way is to extend the point by setting the default default content without slot. This adds more flexibility to the component.

<template> <button class="button" @click="$emit('click')"> <! <slot> <div class="formatting"> {{text}} </div> </slot> </button> </template>Copy the code

When should V-IF be used and when should v-IF not be used

<ComplicatedChart v-show="chartEnabled" />
Copy the code

V-if and V-show are different ways to display elements and not to display elements. So when should V-if be used? If you don’t need to immediately use components that have high performance costs, you can consider using V-if, because V-IF will skip rendering, which will speed up page loading, while v-show can be used if component switching costs are high