广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖

解决Vue3.0中setup需要繁琐将声明的变量、函数以及 import 引入的内容通过return向外暴露,才能在<template/>使用的问题

<script setup>中无需return 声明的变量、函数以及import引入的内容，即可在<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> 需要写setup函数并繁琐retrun

<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() 函数的内容，不需要通过return暴露 声明的变量、函数以及import引入的内容，即可在<template/>使用，并且不需要写export default{}

<script setup>语法糖里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的 <script> 只在组件被首次引入的时候执行一次不同，<script setup> 中的代码会在每次组件实例被创建的时候执行

  <script>  console.log('script');//多次实例组件,只触发一次  export default {      setup() {          console.log('setupFn');//每次实例化组件都触发和script-setup标签一样      }  }  </script>

（script-setup标签最终都会编译成setup() 函数的内容，每次实例化组件，就是实例化一次setup函数。script标签里面的setup函数也是一样每次实例化组件，就是实例化一次setup函数，但是script标签setup是需要写在export default{}内的，外的只是首次引入的时候执行一次）

不需要在引入组件后，通过 components:{}注册组件，可直接使用

<script setup>import MyComponent from './MyComponent.vue'//components:{MyComponent}  不需要注册直接使用</script><template>  <MyComponent /></template>

在<script setup>中必须使用 defineProps 和 defineEmits API 来替代 props 和 emits

defineProps 和 defineEmits具备完整的类型推断并且在 <script setup> 中是直接可用的(浏览了一下掘金，发现大部分文章demo还是通过import引入这2个api，这点官方文档写得很清楚)

接收父组件传递的数据（父组件向子组件传参）

父组件:

<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替代propsconst  props = defineProps({  title: {    type: String  }});//script-setup 需要通过props.xx获取父组件传递过来的propsconsole.log(props.title) //父的值</script>

子组件向父组件传递数据（子组件向外暴露数据）

子组件代码:

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

使用 <script setup> 的组件，父组件是无法通过ref 或者 $parent 获取到子组件的ref等响应数据，需要通过defineExpose 主动暴露

子组件代码：

<script setup>import { ref } from 'vue'const a = 1const 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>

useSlots 和 useAttrs （少用，由于大部分人是SFC模式开发，在<template/>通过<slot/>标签就可以渲染插槽）

如果需要在script-setup中使用 slots 和 attrs 需要用useSlots 和 useAttrs替代

需要引入：import { useSlots ,useAttrs } form 'vue'

在<template/>中通过 $slots 和 $attrs 来访问更方便（attrs用来获取父组件中非props的传递到子组件的参数/方法，attrs 用来获取父组件中非props的传递到子组件的参数/方法，attrs用来获取父组件中非props的传递到子组件的参数/方法，slots可以获取父组件中插槽传递的虚拟dom对象，在SFC模式应该用处不大，在JSX /TSX使用比较多）

父组件:

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

子组件：

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

useSlots或许在JSX/TSX下更实用

想使用JSX语法在vite需要下载相关jsx的plugins才能识别jsx

useSlots 可以获取父组件传递过来插槽的虚拟dom对象，可以用来渲染插槽内容

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

大部分人是SFC模式开发，在<template/>通过<slot/>标签就可以渲染插槽，这种JSX 的写法应该是很少人会使用的

访问路由实例组件信息：route和router

setup 里不能访问 this，不能再直接访问 this.$router 或 this.$route。（getCurrentInstance可以替代this但不推荐）

推荐：使用useRoute 函数和useRouter函数替代this.$route 和 this.$router

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

导航守卫

仍然可以使用路由实例组件的导航守卫

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

也可以使用组合式api的导航守卫onBeforeRouteLeave, onBeforeRouteUpdate

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

组合式 API 守卫也可以用在任何由 `<router-view>` 渲染的组件中，它们不必像组件内守卫那样直接用在路由组件上。

以上就是Vue3怎么使用setup语法糖拒绝写return的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~