Vue3.2セットアップシンタックスシュガー[単一ファイルコンポーネントシンタックスシュガー<script setup>]
オリジナルを読んだ後、デフォルトでは、Vue3.0のコンポジションAPIについてある程度理解していますが、セットアップ関数での面倒な戻りに関連する変数と関数に悩まされており<script setup>、構文から多くを得ることができます。セットアップの砂糖。シンタックスシュガーの導入<script setup>により、Vue3の記述が容易になり、Vue3がより充実したものになります。この記事は公式文書に基づいて書かれています。時間があれば、公式文書を読むことをお勧めします。この記事はより意味的で人気のある方法で書かれています。気に入っていただければ幸いです。
<script setup>これは、単一ファイルコンポーネント（SFC）で複合APIを使用するコンパイル時の構文糖衣です。Vue3.0でのセットアップでは、宣言された変数、関数を公開し、returnを介してコンテンツをインポートするのが面倒であるという問題
を解決する、それらが<template/>使用できること。
1. return宣言なしでインポートによって導入された変数、関数、およびコンテンツは、で使用<script setup>できます。<template/>
-
<script setup>シンタックスシュガー<script setup> //import引入的内容 import { getToday } from './utils' // 变量 const msg = 'Hello!' // 函数 function log() { console.log(msg) } </script> //在template中直接使用声明的变量、函数以及import引入的内容 <template> <div @click="log">{{ msg }}</div> <p>{{getToday()}}</p> </template> 复制代码 -
標準コンポーネント
<script>は、セットアップ関数と面倒な再実行を作成する必要があります<script> //import引入的内容 import { getToday } from './utils' export default{ setup(){ // 变量 const msg = 'Hello!' // 函数 function log() { console.log(msg) } //想在tempate里面使用需要在setup内return暴露出来 return{ msg, log, getToday } } } </script> <template> <div @click="log">{{ msg }}</div> <p>{{getToday()}}</p> </template> 复制代码概要：
<script setup>シンタックスシュガーのコードはコンポーネントsetup()関数<template/>、宣言された変数、関数を公開せずに使用でき、returnを介してコンテンツをインポートするため、記述する必要はありません。export default{}<script setup>シンタックスシュガー内のコードは、コンポーネントsetup()関数。つまり、コンポーネントが最初に導入されたときに1回だけ実行されるのでは<script>なく、コンポーネントのインスタンスが作成されるたび<script setup>にコードが実行されます。
2.<script setup>インポートされたコンポーネントは自動的に登録されます
不需要在引入组件后，通过
components:{}注册组件，可直接使用
<script setup>
import MyComponent from './MyComponent.vue'
//components:{MyComponent} 不需要注册直接使用
</script>
<template>
<MyComponent />
</template>
复制代码3、组件通信:在<script setup>中必须使用 defineProps 和 defineEmits API 来替代 props 和 emits
defineProps和defineEmits具备完整的类型推断并且在<script setup>中是直接可用的(浏览了一下掘金，发现大部分文章demo还是通过import引入这2个api，这点官方文档写得很清楚)
defineProps 代替props，接收父组件传递的数据（父组件向子组件传参）
父组件:
<template>
<div>父组件</div>
<Child :title="msg" />
</template>
<script setup>
import {ref} from 'vue'
import Child from './child.vue'
const msg = ref('父的值') //自动返回，在template直接解套使用
</script>
复制代码子组件：
<template/>中可以直接使用父组件传递的props （可省略props.）<script-setup>需要通过props.xx获取父组件传递过来的props
<template>
<div>子组件</div>
<div>父组件传递的值：{{title}}</div>
</template>
<script setup>
//import {defineProps} from 'vue' 不需要引入
//语法糖必须使用defineProps替代props
const props = defineProps({
title: {
type: String
}
});
//script-setup 需要通过props.xx获取父组件传递过来的props
console.log(props.title) //父的值
</script>
复制代码defineEmit 代替emit，子组件向父组件传递数据（子组件向外暴露数据）
子组件代码:
<template>
<div>子组件</div>
<button @click="toEmits">子组件向外暴露数据</button>
</template>
<script setup>
import {ref} from 'vue'
const name = ref('我是子组件')
//1、暴露内部数据
const emits = defineEmits(['childFn']);
const toEmits = () => {
//2、触发父组件中暴露的childFn方法并携带数据
emits('childFn',name)
}
</script>
复制代码父组件代码:
<template>
<div>父组件</div>
<Child @childFn='childFn' />
<p>接收子组件传递的数据{{childData}} </p>
</template>
<script setup>
import {ref} from 'vue'
import Child from './child.vue'
const childData = ref(null)
const childFn=(e)=>{
consloe.log('子组件触发了父组件childFn，并传递了参数e')
childData=e.value
}
</script>
复制代码4. <script setup>需主动暴露组件属性 ：defineExpose
使用
<script setup>的组件是默认关闭的，也即通过模板 ref 或者$parent链获取到的组件的公开实例，不会暴露任何在<script setup>中声明的绑定。
子组件代码：
<script setup>
import { ref } from 'vue'
const a = 1
const b = ref(2)
//主动暴露组件属性
defineExpose({
a,
b
})
</script>
复制代码父组件代码:
<template>
<div>父组件</div>
<Child ref='childRef' />
<button @click='getChildData'>通过ref获取子组件的属性 </button>
</template>
<script setup>
import {ref} from 'vue'
import Child from './child.vue'
const childRef= ref() //注册响应数据
const getChildData =()=>{
//子组件接收暴露出来得值
console.log(childRef.value.a) //1
console.log(childRef.value.b) //2 响应式数据
}
</script>
复制代码5.语法糖其他功能
-
useSlots和useAttrs（少用，由于大部分人是SFC模式开发，在<template/>通过<slot/>标签就可以渲染插槽）如果需要在
script-setup中使用slots和attrs需要用useSlots和useAttrs替代需要引入：
import { useSlots ,useAttrs } form 'vue'在
<template/>中通过$slots和$attrs来访问更方便（ slots可以获取父组件中插槽传递的虚拟dom对象，在SFC模式应该用处不大，在JSX /TSX使用比较多）父组件:
<template> <Child msg="非porps传值子组件用attrs接收" > <!-- 匿名插槽 --> <span >默认插槽</span> <!-- 具名插槽 --> <template #title> <h1>具名插槽</h1> </template> <!-- 作用域插槽 --> <template #footer="{ scope }"> <footer>作用域插槽——姓名：{{ scope.name }}，年龄{{ scope.age }}</footer> </template> </Child> </template> <script setup> // 引入子组件 import Child from './child.vue' </script> 复制代码子组件：
<template> <!-- 匿名插槽 --> <slot /> <!-- 具名插槽 --> <slot name="title" /> <!-- 作用域插槽 --> <slot name="footer" :scope="state" /> <!-- $attrs 用来获取父组件中非props的传递到子组件的参数 --> <p>{{ attrs.msg == $attrs.msg }}</p> <!--true 没想到有啥作用... --> <p>{{ slots == $slots }}</p> </template> <script setup> import { useSlots, useAttrs, reactive, toRef } from 'vue' const state = reactive({ name: '张三', age: '18' }) const slots = useSlots() console.log(slots.default()); //获取到默认插槽的虚拟dom对象 console.log(slots.title()); //获取到具名title插槽的虚拟dom对象 // console.log(slots.footer()); //报错 不知道为啥有插槽作用域的无法获取 //useAttrs() 用来获取父组件传递的过来的属性数据的（也就是非 props 的属性值）。 const attrs = useAttrs() </script> 复制代码useSlots或许在JSX/TSX下更实用
想使用JSX语法在vite需要下载相关jsx的plugins才能识别jsx
useSlots 可以获取父组件传递过来插槽的虚拟dom对象，可以用来渲染插槽内容
<script lang='jsx'> import { defineComponent, useSlots } from "vue"; export default defineComponent({ setup() { // 获取插槽数据 const slots = useSlots(); // 渲染组件 return () => ( <div> {slots.default?slots.default():''} {slots.title?slots.title():''} </div> ); }, }); </script> 复制代码大部分人是SFC模式开发，在
<template/>通过<slot/>标签就可以渲染插槽，这种JSX 的写法应该是很少人会使用的
总结：setup的语法糖作为Vue3的补充，让Vue3更加丰满，让我们写Vue3更爽。如果觉得写得还不错不吝啬给点给赞再走吧！