setup+vite简单案例

最新推荐文章于 2024-10-27 21:28:26 发布

白鹿依山.12138

最新推荐文章于 2024-10-27 21:28:26 发布

阅读量207

点赞数 4

分类专栏： VUE JS链接库文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_46538844/article/details/133172289

版权

VUE JS链接库专栏收录该内容

12 篇文章

订阅专栏

本文通过三个实例展示了Vite环境下使用Vue3的scriptsetup特性进行组件开发的过程，包括父子组件通信、引入子组件和使用ref和defineProps。同时介绍了setup生命周期中的onMounted和报错的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

setup+vite简单案例

案例一

父组件源码：

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<style scoped>
</style>

子组件源码：

<template>
  <h1>{{ msg }}</h1>
  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
  </div>
</template>

<script setup>
//ref 中定义的值, 需要通过 value 属性~ 是定义基本类型的值
import { ref } from 'vue'
//setup语法糖传值的类型用defineProps传
defineProps({
  msg: String,
})
const count = ref(0)
</script>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

运行结果

案例二

父组件源码：

<template>
  <h1>{{ msg }}</h1>
  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <!-- setup 引入组件:第二步，陈列 -->
    <NeW />
  </div>
</template>

<script setup>
//setup 引入组件:第一步，import引入。setup不像vue.js还要注入,就两个步骤。
import  NeW  from './NeW.vue'
//ref 中定义的值, 需要通过 value 属性~ 是定义基本类型的值
import { ref } from 'vue'
//setup语法糖传值的类型用defineProps传
defineProps({
  msg: String,
})
const count = ref(0)
</script>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

子组件源码：

<template>
    <div>
1
    </div>
</template>

<script>
export default {
    setup () {
        

        return {}
    }
}
</script>

<style lang="scss" scoped>

</style>

运行结果

案例三：

源码：

<template>
    <div>
        <h2>count:{{ count }}</h2>
        <span>这个变量是return直接返回出来的</span>
        <h3>{{ name }}</h3>
        <span>这个变量是reactive创建的，因为是对象类型所有要用{{ obj.name1 }}来获取</span>
        <h3>{{ obj.name1 }}</h3>
        <span>循环数组里面的内容，和v2没什么区别</span>
        <h3 v-for="(val, index) in arr2" :key="index">{{ val }}</h3>
    </div>
</template>

<script>
import { onMounted, reactive, ref } from "vue";
export default {
    setup(msg) {
        //生命周期函数
        onMounted(() => {
            console.log("setup 包含的生命周期,onMounted挂载后调用");
        })
        //用ref创建定时器增加count值
        let count = ref(0)
        // console.log(count.value);
        setInterval(() => {
            (count.value)++
        }, 1000)
        console.log(msg);
        let obj = reactive({ name1: "Mr zhang" })
        let arr2 = ["1", "2", "3"]
        //return里面的都是响应式数据
        return { name: "Mr liu", count: count, obj,arr2 };
    },

    beforeCreate() {
        console.log("setup 会在 beforeCreate 之前执行。");
    }

    
}
</script>

<style lang="scss" scoped></style>

运行结果

报错：

解决：