vue3.2中setup的使用

2021年8月5日发布了Vue3.2.0的版本，3.2x版本最大的亮点是，提升了响应式性能。

script-setup

一开始，vue3.0中的变量必须使用return，才可在template中使用
例如：

<template>
  <div class="home">
    {{name}}
  </div>
</template>
<script>
import {ref} from 'vue'
export default {
 setup(){
   const name=ref('张三');
   return {
     name
   }
 },

}
</script>

vue3.2后，无需return，便可在template中使用

<template>
  <div class="home">
    {{name}}
  </div>
</template>
<script setup>
import {ref} from 'vue'
const name=ref('张三')
</script>

思考问题：

没有了setup函数，props,emit如何获取呢？

使用script-setup后新增的API

defineProps

父组件传递到子组件。例：

//父组件  
<template>
  <div class="home">
    <Child :userName="name"></Child>
  </div>
</template>
<script setup>
import Child from '../components/Child.vue'
import {ref} from 'vue'
const name=ref('张三');
</script>

//子组件  
<template>
    <div>
      子组件--{{userName}}
    </div>
</template>
<script setup>
import {defineProps} from 'vue'
defineProps({
    userName:{
        type:String,
        default:null
    }
})
</script>

defineEmits

子组件向父组件传递。例：

//子组件  
<template>
    <div>
      <button @click="btn">点击</button>
    </div>
</template>
<script setup>
import {defineEmits} from 'vue'
    const emit=defineEmits(['btnFun']);
    const btn=()=>{
        emit('btnFun','我是子组件中的数据')
    }
</script>

//父组件  
<template>
  <div class="home">
    <Child @btnFun="fun"></Child>
  </div>
</template>
<script setup>
import Child from '../components/Child.vue'
const fun=(val)=>{
  console.log(val);//子组件传递过来的值
}
</script>

defineExpose

组件暴露自己的属性，父组件可拿到。例：

//子组件  
<template>
    <div>
      我是子组件
    </div>
</template>
<script setup>
import {defineExpose,reactive,ref} from 'vue'
    let age=ref(18);
    let sex=ref('男');
    let name=reactive({userName:'张三'})
    defineExpose({
        age,
        sex,
        name
    })
</script>

//父组件  
<template>
  <div class="home">
    <button @click="fun">父组件</button>
    <Child ref="child"></Child>
  </div>
</template>
<script setup>
import Child from '../components/Child.vue'
import {ref} from 'vue'
const child=ref();
const fun=()=>{
  console.log(child.value.age); //18
  console.log(child.value.sex); //男
  console.log(child.value.name); //Proxy {userName: '张三'}
}
</script>

完结