setup说明
Vue3.0 在template中想要使用setup中的变量和函数必须return暴露变量出来，template中才可以使用；
缺陷就是会导致在页面上变量会出现很多次，使页面变得不整洁。
很不友好，vue3.2只需要在script标签中添加setup属性，可以帮助我们解决这个问题。
组件只需引入不用注册，属性和方法也不用返回，也不用写setup函数，也不用写export default ，
甚至是自定义指令也可以在我们的template中自动获得。
代码示例
- 使用setup作为script 的属性
<template>
<div class="main">
显示的值{{flag}}
<button @click="handleSetValue">设置值</button>
</div>
</template>
<!-- 只需要在script上添加setup -->
<script lang="ts" setup>
import { ref } from 'vue';
// flag变量不需要在 return出去了
const flag = ref("初始值")
// 函数也可以直接引用,不用在return中返回
const handleSetValue=():void=>{
flag.value='改变了'
}
</script>
- 使用setup作为函数
<template>
<div class="main">
显示的值{{ flag }}
<button @click="handleSetValue">设置值</button>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
setup() {
const flag = ref("初始值")
const handleSetValue=():void=>{
flag.value='改变了'
}
return {
flag,
handleSetValue
}
}
</script>
组件不需要再注册
<template>
<div>
我是子组件
</div>
</template>
// 父组件
<template>
<div class="home">
<test-com />
</div>
</template>
<script lang="ts" setup>
// 组件命名采用的是大驼峰，引入后不需要在注册，是不是爽歪歪呀!
// 在使用的时候直接是小写和横杠的方式连接 test-com
import TestCom from "../components/TestCom.vue"
</script>
在 script setup 中，
引入的组件可以直接使用无需再通过components进行注册
并且无法指定当前组件的名字，它会自动以文件名为主，也就是不用再写name属性了。
当我们的页面上需要使用很多组件时，它的功能一下就体现出来了。
新增 defineProps
刚刚我一直在强调,不需要使用setup函数，机智的小伙伴会说:
那么子组件怎么接受父组件传递过来的值呢?
props，emit怎么获取呢?
别担心,新的api出现了,我们的主角 defineProps
defineProps 的使用
父组件传递参数
<template>
<div class="home">
<test-com :info="msg" time="42分钟" />
</div>
</template>
<script lang="ts" setup>
// 组件命名采用的是大驼峰，引入后不需要在注册，是不是爽歪歪呀!
import TestCom from "../components/TestCom.vue"
let msg='公交车-第一次循环'
</script>
子组件接受参数
<template>
<div>
<h2> 你好-我是Vue</h2>
<p>信息:{{ info}}</p>
<p>{{ time }}</p>
</div>
</template>
<script lang="ts" setup>
import {defineProps} from 'vue'
defineProps({
info:{
type:String,
default:'----'
},
time:{
type:String,
default:'0分钟'
},
})
</script>
子组件怎么向父组件抛出事件？defineEmits的到来！
子组件使用
<!-- 别担心，我们使用defineEmits。它可以向父组件抛出事件。-->
<template>
<div>
<h2> 你好-我是Vue</h2>
<button @click="hander1Click">新增</button>
<button @click="hander2Click">删除</button>
</div>
</template>
<script lang="ts" setup>
import {defineEmits} from 'vue'
// 使用defineEmits创建名称，接受一个数组
const $myemit=defineEmits(['myAdd','myDel'])
const hander1Click=():void=>{
$myemit('myAdd','新增的数据')
}
const hander2Click=():void=>{
$myemit('myDel','删除的数据')
}
</script>
父组件
<template>
<div class="home">
<test-com @myAdd="myAddHander" @myDel='myDelHander'></test-com>
</div>
</template>
<script lang="ts" setup>
// 组件命名采用的是大驼峰，引入后不需要在注册，是不是爽歪歪呀!
// 在使用的使用直接是小写和横杠的方式连接 test-com
import TestCom from "../components/TestCom.vue"
const myAddHander=(mess):void=>{
console.log('新增==>',mess);
}
const myDelHander=(mess):void=>{
console.log('删除==>', mess);
}
</script>
如何获取子组件中的属性值
子组件
<template>
<div>
<h2> 你好-我是Vue</h2>
<p>性别:{{ sex}}</p>
<p>其他信息:{{ info}}</p>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineExpose } from "vue";
const sex=ref('男')
const info = reactive({
like:'喜欢Vue',
age:27
})
// 将组件中的属性暴露出去，这样父组件可以获取
defineExpose({
sex,
info
})
</script>
父组件
<template>
<div class="home">
<test-com @myAdd="myAddHander" @myDel='myDelHander' ref="testcomRef"></test-com>
<button @click="getSonHander">获取子组件中的数据</button>
</div>
</template>
<script lang="ts" setup>
import TestCom from "../components/TestCom.vue"
import {ref} from 'vue'
const testcomRef = ref()
const getSonHander= () =>{
console.log('获取子组件中的性别', testcomRef.value.sex );
console.log('获取子组件中的其他信息', testcomRef.value.info );
}
</script>
本文章借鉴作者：BingJS
地址：https://www.jianshu.com/p/143ddd1d584d
来源：简书
生活就是不断的积累 奥力给~
