vue3新语法糖——setup script

2021/10/14 6:16:33

编程Tag： vue 组件 script const vue3 child setup

本文主要是介绍vue3新语法糖——setup script，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

前言

vue3上线已经很久了，许多小伙伴应该都已经使用过vue3了。那么在使用vue3composition API的时候有没有觉得整个过程会比较繁琐呢。比如当你定义了一个方法，然后发现模板需要使用该方法，然后就必须将方法返回。当一个组件中存在大量方法和属性的时候，这个过程就会非常的难受。

什么是setup script

setup script就是vue3新出的一个语法糖，使用方法就是在书写script标签的时候在其后面加上一个setup修饰。

<script setup></script>
复制代码

看上去是不是很简单呢？

vue3 + ts + setup script + volar最佳实践(在ts中使用setup script看这篇)

setup script有什么用

看到这里很多小伙伴就不理解了，我在script后面加上一个setup有什么用呢？接着看！

1> 自动注册子组件

什么意思？

现在有两个组件，父组件Father.vue，子组件Child.vue。

vue3语法

<template>
  <div>
    <h2>我是父组件!</h2>
    <Child />
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import Child from './Child.vue'

export default defineComponent({
  components: {
      Child
  },
  setup() {

    return {
      
    }
  }
});
</script>
复制代码

vue3语法在引入Child组件后，需要在components中注册对应的组件才可使用。

setup script写法

<template>
  <div>
    <h2>我是父组件!-setup script</h2>
    <Child />
  </div>
</template>

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

</script>
复制代码

这么一对比是不是就非常明了了呢？直接省略了子组件注册的过程。

2> 属性和方法无需返回

重点来了，之前说composition API写起来有点繁琐的原因在于需要手动返回模板需要使用的属性和方法。而在setup script中可以省略这一步。看看下面的例子。

vue3语法

<template>
  <div>
    <h2 @click="ageInc">{{ name }} is {{ age }}</h2>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const name = ref('CoCoyY1')
    const age = ref(18)

    const ageInc = () => {
      age.value++
    }

    return {
      name,
      age,

      ageInc
    }
  }
})
</script>
复制代码

setup script写法

<template>
  <div>
    <h2 @click="ageInc">{{ name }} is {{ age }}</h2>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const name = ref('CoCoyY1')
const age = ref(18)

const ageInc = () => {
  age.value++
}

</script>
复制代码

哇哦，是不是非常方便呢？

3> 支持props、emit和context

看到这里可能有小伙伴会问，没了setup()那怎么获取到props和context呢？来！

vue3语法

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

<script>
import { defineComponent, ref } from 'vue';
import Child from './Child.vue';

export default defineComponent({
  components: {
    Child
  },
  setup(props, context) {
    const childCtx = (ctx) => {
      console.log(ctx);
    }

    return {
      childCtx
    }
  }
})
</script>


//Child.vue
<template>
  <span @click="handleClick">我是子组件! -- msg: {{ props.msg }}</span>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  emits: [
    'child-click'
  ],
  props: {
    msg: String
  },
  setup(props, context) {
    const handleClick = () => {
      context.emit('child-click', context)
    }

    return {
      props,
      handleClick
    }
  },
})
</script>
复制代码

点击一下子组件看看打印了什么。

很明显是成功的打印出了context，这是vue3的语法。

setup script写法

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

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

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


//Child.vue
<template>
  <span @click="handleClick">我是子组件! -- msg: {{ props.msg }}</span>
</template>

<script setup>
import { useContext, defineProps, defineEmit } from 'vue'

const emit = defineEmit(['child-click'])
const ctx = useContext()
const props = defineProps({
  msg: String
})

const handleClick = () => {
  emit('child-click', ctx)
}
</script>
复制代码