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>

显示：