当前位置：首页 > news >正文

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

news 2025/8/4 23:34:21

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>