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
來源:簡書
生活就是不斷的積累 奧力給~