1.setup语法糖简介
直接在script标签中添加setup属性就可以直接使用setup语法糖了。
使用setup语法糖后，不用写setup函数；组件只需要引入不需要注册；属性和方法也不需要再返回，可以直接在template模板中使用。
<template><my-component></my-component></template><script>
import {ref} from 'vue';
import myComponent from '@/component/myComponent.vue';
//此时注册的变量或方法可以直接在template中使用而不需要导出
const numb = ref(0);
let func = ()=>{
numb.value++;
}
</script>
2.setup语法糖中新增的api
defineProps：子组件接收父组件中传来的props
defineEmits：子组件调用父组件中的方法
defineExpose：子组件暴露属性，可以在父组件中拿到
2.1defineProps
父组件代码
<template><my-component></my-component></template><script>
import {ref} from 'vue';
import myComponent from '@/components/myComponent.vue';
const numb = ref(0);
let func = ()=>{
numb.value++;
}
</script>
子组件代码
<template><div>{{numb}}</div>
</template><script>
import {defineProps} from 'vue';
defineProps({
numb:{
type:Number,
default:NaN
}
})
</script>
2.2defineEmits
子组件代码
<template><div>{{numb}}</div>
<button>数值加1</button>
</template><script>
import {defineProps,defineEmits} from 'vue';
defineProps({
numb:{
type:Number,
default:NaN
}
})
const emit = defineEmits(['addNumb']);
const onClickButton = ()=>{
//emit(父组件中的自定义方法,参数一,参数二,...)
emit("addNumb");
}
</script>
父组件代码
<template><my-component></my-component></template><script>
import {ref} from 'vue';
import myComponent from '@/components/myComponent.vue';
const numb = ref(0);
let func = ()=>{
numb.value++;
}
</script>
2.3defineExpose
子组件代码
<template><div>子组件中的值{{numb}}</div>
<button>数值加1</button>
</template><script>
import {ref,defineExpose} from 'vue';
let numb = ref(0);
function onClickButton(){
numb.value++;
}
//暴露出子组件中的属性
defineExpose({
numb
})
</script>
父组件代码
<template><my-comp></my-comp><button>获取子组件中暴露的值</button>
</template><script>
import {ref} from 'vue';
import myComp from '@/components/myComponent.vue';
//注册ref，获取组件
const myComponent = ref();
function onClickButton(){
//在组件的value属性中获取暴露的值
console.log(myComponent.value.numb) //0
}
//注意：在生命周期中使用或事件中使用都可以获取到值，
//但在setup中立即使用为undefined
console.log(myComponent.value.numb) //undefined
const init = ()=>{
console.log(myComponent.value.numb) //undefined
}
init()
onMounted(()=>{
console.log(myComponent.value.numb) //0
})
</script>
补充：与普通的script一起使用
<script setup>可以和普通的<script>一起使用。普通的<script>在有这些需要的情况下或许会被使用到。</script>
无法在<script setup>声明的选项，例如inheritAttrs或通过插件启用的自定义的选</script>
声明命名导出
运行副作用或者创建只需要执行一次的对象
<script>
// 普通 <script>, 在模块范围下执行(只执行一次)
runSideEffectOnce()
// 声明额外的选项
export default {
inheritAttrs: false,
customOptions: {}
}
</script><script>
// 在 setup() 作用域中执行 (对每个实例皆如此)
</script>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
