preface

Having seen the basics of Vue3.0, let’s try to write a basic Button component using Vue3.0. Define a baseButton file

<template>
    <button class="btn-container" @click="clickBtn">
        <span style="line-height: 40px">{{label}}</span>
    </button>
</template>

<script>
    export default {
        name: "baseButton".props: {label:String
        },
        setup(props,context){
            const clickBtn = () = >{
                console.log("I got clicked.")
                context.emit('clickBtn'.The title of the 'button is:${props.label}`)}return {
                clickBtn
            }
        }
    }
</script>
Copy the code

Used in APP. Vue

<template>
    <div>
        <base-button label="I am a button" @clickBtn="clickBtn"></base-button>
    </div>
</template>

<script >
    import baseButton from "./components/baseButton.vue";
    import {ref ,reactive,h} from 'vue'
    export default {
        components:{
            baseButton
        },
        setup(props,context){
            const clickBtn = (data) = >{
                console.log(data)
            }

            return {
                clickBtn
            }
        }
    }
</script>
Copy the code

Console output

This gives us a very basic button component that uses functions, variables, and returns defined in setup. There is not much difference between the approach used and Vue2.0, and the code is much simpler than 2.0.Vue2.0 implements a button

As you can see from this example, in Vue3.0 we have changed the way we use function variables. Instead of defining methods in methods and data in data, we have solved everything in Setup. However, Vue3.0 learning is still not enough, and some cognitive problems may exist, which need to be supplemented later. At the same time, the content of this article may be insufficient or there are problems, you are welcome to put forward suggestions, actively respond to the gold digging activities, this article is participating in the “gold digging pamphlet free learning!” Event, click to view details of the event