vue3中如何更改当前类的文件名称

时间：2024-10-16 07:00:36

首先，使用script指定文件名称

<template>
    <div class="person">
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <button @click="showTel">查看联系方式</button>
        <button @click="changeName">修改名字</button>
    </div>
    
</template>

<script lang="ts">
    export default {
        name:'Person',
        data(){
           return {
            name:"张三",
            age:18,
            tel:"138888888",
            count: 1
           } 
        },
        methods:{
            showTel(){
                alert(this.tel)
            },
            changeName(){
                this.name = 'zhangsan' + this.count++
            }
        }
    }
</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px
}
</style>

其次，使用setup函数

setup函数使用后，就不用手动将数据、函数ruturn出去

<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="showTel">查看联系方式</button>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<script lang="ts">
export default {
  name: "PersonPlus"
};
</script>

<script lang="ts" setup>
import { ref } from 'vue';

// 定义响应式变量
const name = ref<string>("雄安话") // 明确类型为字符串
const age = ref<number>(18) //明确类型为number
const tel= ref<string>("123456789")  //明确类型为字符串
const count= ref<number>(1) //明确类型为number
function showTel() {
  alert(tel.value);
}
function changeName() {
  name.value = `zhangsan${count.value++}`;
}
function changeAge() {
  age.value = Number(age.value) + 1;
}

</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>

此时，我们使用了两个script标签，我们尝试将便签合并

<!-- <script lang="ts">
export default {
  name: "PersonPlus"
};
</script> -->

<script lang="ts" setup name="PersonPlus123">
import { ref } from 'vue';

// 定义响应式变量
const name = ref<string>("雄安话") // 明确类型为字符串
const age = ref<number>(18) //明确类型为number
const tel= ref<string>("123456789")  //明确类型为字符串
const count= ref<number>(1) //明确类型为number
function showTel() {
  alert(tel.value);
}
function changeName() {
  name.value = `zhangsan${count.value++}`;
}
function changeAge() {
  age.value = Number(age.value) + 1;
}

</script>

此时观察界面是不生效的！！！

安装插件，执行语句

 npm install vite-plugin-vue-setup-extend

其次，我们配置使用该插件，找到该目录 

添加这两行代码：

import VueSetupExtend from 'vite-plugin-vue-setup-extend'
    VueSetupExtend()

 最后重新启动项目，测试一下

测试成功！！！ 

 使用响应式编程，一定要导入 ref、reactive

import {ref,reactive} from "vue"

相关文章