vue3 setup语法糖（部分总结）
setup script有什么用
看到这里很多小伙伴就不理解了，我在script后面加上一个setup有什么用呢？接着看！
1、自动注册子组件
直接看例子
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('lieo')
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
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>
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 { defineProps, defineEmit } from 'vue'
const emit = defineEmit(['child-click'])
const props = defineProps({
msg: String
})
const handleClick = () => {
emit('child-click', "点击了")
}
</script>
4.父子组件访问方法及属性的方式
<template>
<Nav ref="Nav" @mouseover="mouseCollapseMenu()"></Nav>
</template>
<script lang="ts" setup>
import Nav from "./components/nav.vue";
import { nextTick, ref } from "vue";
const Nav = ref(null);
const handleMenu = () => {
nextTick(() => {
Nav.value.handleMenu(false);
});
};
</script>
子组件里面暴露
<script setup>
import {defineExpose, ref } from 'vue'
//子组件暴露出去 用于父组件调用
defineExpose({
handleMenu(value: boolean) {
handleMenu(value);
},
});
</script>
在setup 语法糖中 目前没有拿到context的导出方法
但其中的attrs、emit、props、slots、expose属性和方法依然可以使用。
5.useSlots 和 useAttrs
在