Vue3如何使用setup语法糖拒绝写return

这篇“vue3如何使用setup语法糖拒绝写return”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue3如何使用setup语法糖拒绝写return”文章吧。

Vue3.2 setup语法糖

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

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

1.<script setup>在<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{}内的，外的只是首次引入的时候执行一次）

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

5.语法糖其他功能

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使用比较多）

父组件:

<template>  <Child msg="非porps传值子组件用attrs接收" >    <!-- 匿名插槽 -->    <span >默认插槽</span>    <!-- 具名插槽 -->    <template #title>      <h3>具名插槽</h3>    </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 的写法应该是很少人会使用的

6.在setup访问路由

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

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

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

<script setup>import { useRouter, useRoute } from 'vue-router'    const route = useRoute()    const router = useRouter()        function pushWithQuery(query) {      router.push({        name: 'search',        query: {          ...route.query,        },      })    }  <script/>

• 导航守卫

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

import router from './router'router.beforeEach((to,from,next)=>{})

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

<script setup>import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'    // 与 beforeRouteLeave 相同，无法访问 `this`    onBeforeRouteLeave((to, from) => {      const answer = window.confirm(        'Do you really want to leave? you have unsaved changes!'      )      // 取消导航并停留在同一页面上      if (!answer) return false    })    const userData = ref()    // 与 beforeRouteUpdate 相同，无法访问 `this`    onBeforeRouteUpdate(async (to, from) => {      //仅当 id 更改时才获取用户，例如仅 query 或 hash 值已更改      if (to.params.id !== from.params.id) {        userData.value = await fetchUser(to.params.id)      }    }) <script/>

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

以上就是关于“Vue3如何使用setup语法糖拒绝写return”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。