vue3 setup语法糖请注意在script标签里加setup，不用return

2021-10-29 23:07:20 阅读：311 来源： 互联网

标签：vue const script setup msg import 组件 return

虽然Composition API用起来已经非常方便了，但是我们还是有很烦的地方，比如

组件引入了还要注册
属性和方法都要在setup函数中返回，有的时候仅一个return就十几行甚至几十行
不想写啊怎么办

好办，Vue3官方提供了script setup语法糖

只需要在script标签中添加setup，组件只需引入不用注册，属性和方法也不用返回，setup函数也不需要，甚至export default都不用写了，不仅是数据，计算属性和方法，甚至是自定义指令也可以在我们的template中自动获得。

但是这么过瘾的语法糖，还是稍微添加了一点点心智负担，因为没有了setup函数，那么props，emit，attrs怎么获取呢，就要介绍一下新的语法了。

setup script`语法糖提供了三个新的`API`来供我们使用：`defineProps`、`defineEmits`和`useContext

defineProps 用来接收父组件传来的值props。
defineEmits 用来声明触发的事件表。
useContext 用来获取组件上下文context。

父组件

<template>
  <div>
    <h2>我是父组件！</h2>
    <Child msg="hello"
    @child-click="handleClick" />
  </div>
</template>

<script setup>
import Child from './components/Child.vue'

const handleClick = (ctx) => {
  console.log(ctx)
}
</script>

子组件

<template>
  <span @click="sonClick">msg: {{ props.msg }}</span>
</template>

<script setup>
import { useContext, defineProps, defineEmits } from 'vue'
 // defineProps 用来接收父组件传来的值props。

 // defineEmits 用来声明触发的事件表。

 // useContext 用来获取组件上下文context。

const emit = defineEmits(['child-click'])
const ctx = useContext()
const props = defineProps({  // 可以拿到它的值
  msg: String,
})

const sonClick = () => {
  emit('child-click', ctx)
}
</script>

代码演示

子组件先不使用语法糖

<template>
  <div>
    我是子组件{{msg}}
  </div>
</template>

<script >
import { ref } from 'vue'

export default {
  setup() {
    const msg = ref('hello')
    return {
      msg,
    }
  },
}

现在把子组件换成script setup语法糖再来试一试

<template>
  <div>
    我是子组件{{msg}}
  </div>
</template>

<script setup>
import { ref } from 'vue'
const msg = ref('hello')
</script>

不必再配合 async 就可以直接使用 await 了，这种情况下，组件的 setup 会自动变成 async setup

<script setup>
  const post = await fetch('/api').then(() => {})
</script>

css 变量注入

<template>
  <span>Jerry</span>  
</template>

<script setup>
  import { reactive } from 'vue'

  const state = reactive({
    color: 'red'
  })
</script>
  
<style scoped>
  span {
    // 使用v-bind绑定state中的变量
    color: v-bind('state.color');
  }  
</style>

nextTick

<script setup>
  import { nextTick } from 'vue'
	
  nextTick(() => {
    // ...
  })
</script>

路由导航守卫

<script setup>
  import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
	
  // 添加一个导航守卫，在当前组件将要离开时触发。
  onBeforeRouteLeave((to, from, next) => {
    next()
  })

  // 添加一个导航守卫，在当前组件更新时触发。
  // 在当前路由改变，但是该组件被复用时调用。
  onBeforeRouteUpdate((to, from, next) => {
    next()
  })
</script>

标签：vue,const,script,setup,msg,import,组件,return
来源： https://blog.csdn.net/qq_54753561/article/details/121044074

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue3 setup语法糖请注意在script标签里加setup，不用return

nextTick