Vue3【四】使用Vue2的写法写一个新的组件

Vue3【四】使用Vue2的写法写一个新的组件
Vue3是向下兼容的，所有可以使用Vue的选项式写法

运行截图

目录结构

文件源码

App.vue

<template>
    <div class="app">
        <h1>你好世界! 我是App根组件</h1>
        <Person />
    </div>
</template>

<script lang="ts">
import Person from './components/Person.vue'
export default {
    name: 'App', //组件名字
    // 注册组件
    components: {
        Person
    }
}

</script>

<style>
.app {
    background-color: #4fffbb;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
</style>

Persion.vue

<template>
    <div class="person">
        <h1>我是Person组件</h1>
        <h2>姓名:{{ name }}</h2>
        <h2>年龄:{{ age }} </h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showAdd">查看信息</button>
    </div>
</template>

<script lang="ts">
export default {
    name: 'Person', //组件名字
    // Vue2 方式写的数据
    data() {
        return {
            name: "太上老君",
            age: 18000,
            add: '太上老君是公认的道教始祖，即道教中具有开天创世与救赎教化的太上道祖。'
        }
    },
    methods: {
        showAdd() {
            alert(this.add)
        },
        changeName(){
            this.name = this.name == "太白金星"?'太上老君':'太白金星'
        },
        changeAge(){
            this.age += 1
        }
    }
}

</script>

<style>
.person {
    background-color: #ff9e4f;
    box-shadow: 0 0 10px;
    border-radius: 30px;
    padding: 30px;
}
button{
    margin:0 10px;
    padding: 0 5px;
    box-shadow: 0 0 5px;;
}
</style>