什么是setup语法糖
起初 Vue3.0 暴露变量必须 return 出来，template中才能使用；
现在只需在script标签中添加setup，组件只需引入不用注册，属性和方法也不用返回，也不用写setup函数，也不用写export default ，甚至是自定义指令也可以在我们的template中自动获得。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <template>
<my-component :num="num" @click="addNum" />
</template>
<script setup>
import { ref } from 'vue';
import MyComponent from './MyComponent .vue';
const num= ref(0)
const addNum= () => {
num.value++
}
</script>
|
使用setup组件自动注册
在 script setup 中，引入的组件可以直接使用，无需再通过components进行注册，并且无法指定当前组件的名字，它会自动以文件名为主，也就是不用再写name属性了
1
2
3
4
5
6
7
| <template>
<zi-hello></zi-hello>
</template>
<script setup>
import ziHello from './ziHello'
</script>
|
使用setup后新增API
因为没有了setup函数，那么props，emit怎么获取呢
setup script语法糖提供了新的API来供我们使用
defineProps
用来接收父组件传来的 props。示例:
父组件代码
1
2
3
4
5
6
7
8
9
10
11
12
13
| <template>
<div class="die">
<h3>我是父组件</h3>
<zi-hello :name="name"></zi-hello>
</div>
</template>
<script setup>
import ziHello from './ziHello'
import {ref} from 'vue'
let name = ref('赵小磊========')
</script>
|
子组件代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <template>
<div>
我是子组件{{name}} // 赵小磊========
</div>
</template>
<script setup>
import {defineProps} from 'vue'
defineProps({
name:{
type:String,
default:'我是默认值'
}
})
</script>
|
defineEmits
子组件向父组件事件传递。示例:
子组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <template>
<div>
我是子组件{{name}}
<button @click="ziupdata">按钮</button>
</div>
</template>
<script setup>
import {defineEmits} from 'vue'
const em=defineEmits(['updata'])
const ziupdata=()=>{
em("updata",'我是子组件的值')
}
</script>
|
父组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <template>
<div class="die">
<h3>我是父组件</h3>
<zi-hello @updata="updata"></zi-hello>
</div>
</template>
<script setup>
import ziHello from './ziHello'
const updata = (data) => {
console.log(data);
}
</script>
|
defineExpose
组件暴露出自己的属性，在父组件中可以拿到。示例:
子组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <template>
<div>
我是子组件
</div>
</template>
<script setup>
import {defineExpose,reactive,ref} from 'vue'
let ziage=ref(18)
let ziname=reactive({
name:'赵小磊'
})
defineExpose({
ziage,
ziname
})
</script>
|
父组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <template>
<div class="die">
<h3 @click="isclick">我是父组件</h3>
<zi-hello ref="zihello"></zi-hello>
</div>
</template>
<script setup>
import ziHello from './ziHello'
import {ref} from 'vue'
const zihello = ref()
const isclick = () => {
console.log('接收ref暴漏出来的值',zihello.value.ziage)
console.log('接收reactive暴漏出来的值',zihello.value.ziname.name)
}
</script>
|
参考链接
https://www.jb51.net/article/231485.htm
https://v3.cn.vuejs.org/api/sfc-script-setup.html#%E4%BD%BF%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4
