文章目录
简介
<script setup>
语法糖并不是新增的功能模块,它只是简化了以往的组合API(compositionApi)
的必须返回(return)
的写法,并且有更好的运行时性能。
在 setup 函数中:所有 ES 模块导出都被认为是暴露给上下文的值,并包含在 setup()
返回对象中。相对于之前的写法,使用后,语法也变得更简单。
你不必担心setup语法糖
的学习成本,他是组合式API的简化,并没有新增的知识点。你只需要了解一些用法和细微的不同之处,甚至比之前写setup()
还要顺手!
使用方式极其简单,仅需要在 script 标签加上 setup 关键字即可。示例:
<script setup>
</script>
注:因为setup语法糖是vue3.2正式确定下来的议案,所以 vue3.2 的版本是真正适合setup语法糖的版本。
1. 属性和方法无需返回,直接使用
以前使用响应式数据是:
<template>
{{msg}}
</template>
<script>
import { ref } from 'vue'
export default {
setup () {
const msg = ref('hello vue3');
return {
msg
}
}
}
</script>
现在使用 setup 语法糖,不需要return返回
和 setup函数
,只需要全部定义在<script setup>
内即可:
<template>
{{msg}}
</template>
<script setup>
import { ref } from 'vue'
const msg = ref('hello vue3');
</script>
reactive
, computed
, 也一样可以使用:
<template>
<div>{{msg}}</div>
<div>{{obj.a}}</div>
<div>{{sum}}</div>
</template>
<script setup>
import { ref, reactive, computed } from 'vue'
const msg = ref('hello vue3');
const obj = reactive({
a: 1,
b: 2
})
const sum = computed(() => {
return obj.a + 3;
});
</script>
2. 组件自动注册
在 script setup 中,引入的组件可以直接使用,无需再通过components进行注册,并且无法指定当前组件的名字,它会自动以文件名为主,也就是不用再写name属性了。示例:
<template>
<Child />
</template>
<script setup>
import Child from '@/components/Child.vue'
</script>
3. 组件数据传递( defineProps 和 defineEmits )
props
和 emits
在语法糖中使用 defineEmits
和 defineProps
方法来使用:
子组件 Child.vue:
<template>
<div @click="toEmits">Child Components</div>
</template>
<!-- vue3.x中的写法 -->
<script setup>
// defineEmits,defineProps无需导入,直接使用
const props = defineProps({
title: {
type: String,
default: 'default title'
}
});
// 获取父组件传递过来的数据
console.log(props.title);
const emits = defineEmits(['getChild']);
const toEmits = () => {
emits('getChild', 'child value') // 向父组件传递数据
}
</script>
<!-- vue2.x中的写法 -->
<script>
import { defineComponent } from 'vue';
export default defineComponent({
props: {
title: {
type: String,
default: 'default title'
}
},
setup(props, context) {
// 获取父组件传递过来的数据
console.log(props.title);
const toEmits = () => {
context.emit('getChild', 'child value'); // 向父组件传递数据
};
return { toEmits };
}
});
</script>
父组件 Home.vue:
<template>
<Child @getChild="getChild" :title="msg" />
</template>
<script setup>
import { ref } from 'vue'
import Child from '@/components/Child.vue'
const msg = ref('parent value')
const getChild = (e) => {
// 接收父组件传递过来的数据
console.log(e); // child value
}
</script>
4. 对外暴露属性(defineExpose)
<script setup>
的组件默认不会对外部暴露任何内部声明的属性。
如果有方法或属性要暴露出去,可以使用 defineExpose
子组件 Child.vue:
<template>
{{msg}}
</template>
<script setup>
import { ref } from 'vue'
let msg = ref("Child Components");
let num = ref(123);
// defineExpose无需导入,直接使用
defineExpose({
msg,
num
});
</script>
父组件 Home.vue:
<template>
<Child ref="child" />
</template>
<script setup>
import { ref, onMounted } from 'vue'
import Child from '@/components/Child.vue'
let child = ref(null);
onMounted(() => {
console.log(child.value.msg); // Child Components
console.log(child.value.num); // 123
})
</script>
5. 获取 slots 和 attrs
context
里面包含 attrs
, slots
, emit
等数据方法:
attrs
:获取组件上的属性slots
:获取 slot 插槽的节点emit
:emit 方法(子组件向父组件传递数据)
父组件:
<template>
<Sub subData="some other data" @subClick='subClick'>parent</Sub>
</template>
<script>
import Sub from './Sub.vue'
export default {
setup () {
function subClick (e) {
console.log(e); // 接收子组件传递过来的数据
}
return { subClick }
},
components: { Sub },
}
</script>
子组件:
<template>
<!-- 父组件向子组件传递数据 -->
<div @click="handleClick">Child</div>
</template>
<script>
export default {
mounted () {
// vue2.x 获取组件上的属性
console.log(this.$attrs.subData); // 'some other data'
// vue2.x 获取slot插槽的节点
console.log(this.$slots);
},
methods: {
// vue2.x emit方法(子组件向父组件传递数据)
handleClick () {
this.$emit('subClick', 'vue2.x - this is subData')
},
},
setup (props, context) {
let { attrs, slots, emit } = context;
// vue3.x 获取组件上的属性
console.log(attrs.subData); // 'some other data'
// vue3.x 获取slot插槽的节点
console.log(slots.default());
// vue3.x emit方法(子组件向父组件传递数据)
function handleClick () {
emit('subClick', 'vue3.x - this is subData');
}
return { handleClick }
}
}
</script>
<script setup>
中可以通过 useContext
从上下文中获取 slots 和 attrs。
// 旧
<script setup>
import { useContext } from 'vue'
const { slots, attrs } = useContext()
</script>
不过提案在正式通过后,废除了这个语法,被拆分成了 useAttrs
和 useSlots
。示例:
// 新
<script setup>
import { useAttrs, useSlots } from 'vue'
const slots = useSlots();
const attrs = useAttrs();
console.log(attrs.dataId); // 查看父组件传来的自定义属性
</script>