Vue3.0的新語法糖-script setup

基本用法

在Conponents目錄下，新建一個msg.vue

<template>
  <div>
    {{ msg }}
  </div>
</template>

<script setup>
  let msg = "hello!"

</script>

在APP.vue引入

<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>

顯示的結果：

比我們之前的export引入，然后components加msg要簡便的多

 

 

兩種方式：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>

顯示：