Vue
3.x语法糖script setup
和相关API
的使用
前言:随着Vue
3.2版本的更新,script-setup
语法糖也随之产生,免去了写setup
函数和export default
的繁琐步骤,自定义指令可以直接获得并使用,文章侧重于组件以及组件传参使用,响应式相关内容详见文档Vue3文档
1.组件自动注册
-
区别于
Vue
2.x,使用script setup
语法糖后,引入自定义组件时可以免去components
注册的过程,直接引入组件,需要注意不能使用name
属性修改组件名称了,实例如下:<template> <Count></Count> </template> <script setup> import Count from '../components/Count.vue' </script>
2.defineProps
的使用
-
defineProps
用来接收父组件传来的props
-
父组件代码:
<template> <p>父组件</p> <Count :count="num"></Count> </template> <script setup> import Count from '../components/Count.vue' import { ref } from 'vue' let num = ref(666) </script>
-
子组件代码:
<template> <div> 子组件{{ count }} </div> </template> <script setup> import { defineProps } from 'vue' defineProps({ count:{ type: Number, default: 6 } }) </script>
3.defineEmits
的使用
-
子组件向父组件事件传递(子组件触发父组件事件)
-
父组件代码:
<template> <p>父组件</p> <Count @handleEvent="showData"></Count> </template> <script setup> import Count from '../components/Count.vue' const showData = (data) => { console.log(data); // 子组件触发父组件事件 } </script>
-
子组件代码:
<template> <div> 子组件 <button @click="handleEvent">触发事件</button> </div> </template> <script setup> import { defineEmits } from 'vue' const em = defineEmits(['handleEvent']) function handleEvent() { em('handleEvent', '子组件触发父组件事件') } </script>
3.1.结合defineProps
和defineEmits
-
结合
defineProps
和defineEmits
做一个点击按钮后子组件数值+1的自定义组件 -
父组件代码:
<template> <p>父组件</p> <Count @handleEvent="showData" :count="num"></Count> </template> <script setup> import Count from '../components/Count.vue' import { ref } from 'vue' const num = ref(0) const showData = (data) => { num.value++ // 数值+1 console.log(data); // 子组件触发父组件事件 } </script>
-
子组件代码:
<template> <div> 子组件数值{{count}} <button @click="handleEvent">触发事件</button> </div> </template> <script setup> import { defineEmits, defineProps } from 'vue' defineProps({ count: { type: Number, default: 0, } }) const em = defineEmits(['handleEvent']) function handleEvent() { em('handleEvent', '子组件触发父组件事件') } </script>
4.defineExpose
的使用
-
将组件中自己的属性暴露,在父组件中能够拿到
-
父组件代码:
<template> <List ref="sonRef"></List> <button @click="getSonData">获取子组件暴漏的值</button> </template> <script setup> import List from '../components/list.vue' import { ref } from 'vue' const sonRef = ref() function getSonData() { console.log('子组件中ref暴漏的数值', sonRef.value.sonNum) // 子组件中ref暴漏的数值 0 console.log('子组件中reactive暴漏的字符串', sonRef.value.sonName.name) // 子组件中reactive暴漏的字符串 小明 } </script>
-
子组件代码:
<template> <div class="list-card"> 这是子组件 </div> </template> <script setup> import { defineExpose, reactive, ref } from 'vue' let sonNum = ref(0) let sonName = reactive({ name: '小明' }) defineExpose({ sonNum, sonName }) </script>
5.useAttrs
的使用
-
父组件传递给子组件的属性中除了
props
、class
、style
外的属性 -
父组件代码:
<template> 父组件 <List a="1" b="2"></List> </template> <script setup> import List from '../components/list.vue' </script>
-
子组件代码:
<template> 子组件 </template> <script setup> import { useAttrs } from 'vue' const attrs = useAttrs() console.log(attrs) </script>
-
打印结果如下:
以上就是Vue3.x中和组件相关API的使用与demo实例,欢迎补充与讨论🌈