Vue3.0的新语法糖-script setup

vue3.0的语法糖 script setup

写在前面

进入vue3.0 我们的vue代码模板格式也发生变化 也许你看到的代码是这样的

<template>
  <div>
​
  </div>
</template>
​
<script lang="ts">
import { defineComponent } from 'vue'
​
export default defineComponent({
  setup () {
    
​
    return {}
  }
})
</script>
​
<style scoped>
​
</style>

但是每次 都要 import defineComponent 然后再去 export 让我们由衷感到苦恼 苦恼 vue3.0的写法貌似变复杂了很多

于是 它来了

<template>
  <div>
​
  </div>
</template>
​
<script setup lang="ts">
​
</script>
​
<style scoped>
​
</style>

是不是感觉 巴适很多 当然以上只是一个对比 我们该如何使用呢 来来来 往下看

1. 基本用法

   在Conponents目录下，新建一个msg.vue

   <template>
     <div>
       {{ msg }}
     </div>
   </template>
   ​
   <script setup>
     let msg = "hello!"
   </script>
   

   第二件事我们就是在父组件中引用它

   <template>
     <img alt="Vue logo" src="./assets/logo.png" />
     <HelloWorld msg="Hello Vue 3.0 + Vite" />
     <msg></msg>
   </template>
   ​
   <script setup>
   import HelloWorld from './components/HelloWorld.vue'
   import msg from "./components/msg.vue"
   ​
   </script>
   

   可以看到 这个父组件中 直接import 就行啦 啥都不用干 就连vue2.0中的 也不需要了

   components:{
      msg
   }
   

   再也不用担心 组件引用了 没有挂到components 中了

2. props和emit

   因为3.0中 我们的思想都是 先import 再使用 并非一次性把所有api 都全部加载了 所以 用props 和emit 也是一样的啦 用前先引用

   需要先去引入defineProps和defineEmit。这样引入是因为用了script setup标签，就相当于props和emit

   <template>
     <div>
       {{ msg }}
       <button @click="onClick">点击按钮</button>
     </div>
   </template>
   ​
   <script setup>
   import { defineProps, defineEmit } from "vue";// props emit
   let props = defineProps({
     msg: String,
   });
   console.log(props);
   ​
   let emit = defineEmit(["click"]);
   const onClick = () => {
     emit("click");
   console.log("click。。。");
   ​
   };
   </script>
   

   app,vue中

   <template>
     <img alt="Vue logo" src="./assets/logo.png" />
     <HelloWorld msg="Hello Vue 3.0 + Vite" />
     <msg msg="天气很好" @click="onClick"></msg>
   </template>
   ​
   <script setup>
   import HelloWorld from './components/HelloWorld.vue'
   import msg from "./components/msg.vue"
   </script>
   

   嗯.... 香y

   原文借鉴于:小兔儿_乖乖 的vue3.0的新语法糖-script setup

   如有侵权 麻烦联系作者删除

   \