關(guān)于vue3中setup函數(shù)的使用
概述
一、 初識(shí)setup函數(shù)
組件中所用到的：數(shù)據(jù)、方法等等均要配置在setup中，這也就意味著在Vue2中寫的data、methods在這里都不再推薦使用。
這樣的配置讓對(duì)象式編程趨近于了函數(shù)式編程。
<script>
export default {
name: 'App',
// 最為原始的對(duì)象寫法是這樣，但是通過es6我們可以簡(jiǎn)寫
// setup: function(){}
setup () {
// 數(shù)據(jù)
let name = '黑貓幾絳'
let age = 20
// 方法
function sayHello() {
console.log(`我叫${name}，我今年${age}了`)
}
}
}
</script>了解過Vue2響應(yīng)式原理的話你可能會(huì)有疑問說，在這個(gè)地方name和age并不是響應(yīng)式的。
的確如此，在這里我們僅僅是測(cè)試一下setup中是否可以放入數(shù)據(jù)與方法，響應(yīng)式在后面的專欄文章中介紹。
如果此時(shí)未了解響應(yīng)原理，可以看看我以前的一篇文章，這篇文章里有詳細(xì)介紹
二、 關(guān)于setup的返回值
僅僅存放數(shù)據(jù)與方法還不夠，我們需要將他們作為返回值返回出去，在模板中便可以直接使用。
<template>
<h1>我叫{{name}}，我今年{{age}}了</h1>
</template>
<script>
export default {
name: 'App',
// 最為原始的對(duì)象寫法是這樣，但是通過es6我們可以簡(jiǎn)寫
// setup: function(){}
setup () {
// 數(shù)據(jù)
let name = '黑貓幾絳'
let age = 20
// 方法
function sayHello() {
console.log(`我叫${name}，我今年${age}了`)
}
return{
name,
age,
sayHello
}
}
}
</script>在概述里面還介紹了setup的另外一種返回值，即返回一個(gè)渲染函數(shù)，這個(gè)函數(shù)的方法有一點(diǎn)像React.creatElement，可以自定義渲染的內(nèi)容。
<script>
import {h} from 'vue'
export default {
name: 'App',
setup () {
// 在頁面上渲染出一個(gè)h1標(biāo)簽
return ()=> h('h1', '黑貓幾絳')
}
}
</script>三、 關(guān)于setup的參數(shù)
# App.vue
<template>
<Demo msg="hello" name="world" @hello="changeId">
<template v-slot:test>
摸魚
</template>
</Demo>
</template># Demo.vue
<script>
export default {
name:'Demo',
props:['msg'],
setup(props,context){
console.log(props);
console.log(context.attrs);
console.log(context.slots);
console.log(context.emit);
}
}
</script>
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue組件傳值(高級(jí))、屬性傳值、反向傳值、跨級(jí)傳值實(shí)例詳解
父組件通過屬性傳值給子組件，父組件修改數(shù)據(jù)后會(huì)刷新頁面并重新傳值給子組件，子組件可以修改父組件傳的值并刷新自己的頁面?但是并不會(huì)修改父組件中的值，這篇文章主要介紹了vue組件傳值（高級(jí)）、屬性傳值、反向傳值、跨級(jí)傳值,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue?innerHTML?綁定單擊事件不生效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
mpvue 項(xiàng)目初始化及實(shí)現(xiàn)授權(quán)登錄的實(shí)現(xiàn)方法
這篇文章主要介紹了mpvue 項(xiàng)目初始化及實(shí)現(xiàn)授權(quán)登錄的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了通過原生vue添加滾動(dòng)加載更多功能,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
Xx-vue自定義指令實(shí)現(xiàn)點(diǎn)擊水波紋漣漪效果
這篇文章主要為大家介紹了Xx-vue自定義指令實(shí)現(xiàn)點(diǎn)擊水波紋漣漪效果，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
Element?Table行的動(dòng)態(tài)合并及數(shù)據(jù)編輯示例
這篇文章主要為大家介紹了Element?Table行的動(dòng)態(tài)合并及數(shù)據(jù)編輯示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue中利用simplemde實(shí)現(xiàn)markdown編輯器（增加圖片上傳功能）
這篇文章主要介紹了vue中利用simplemde實(shí)現(xiàn)markdown編輯器（增加圖片上傳功能）,本文通過實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
vue flex 布局實(shí)現(xiàn)div均分自動(dòng)換行的示例代碼
這篇文章主要介紹了vue flex 布局實(shí)現(xiàn)div均分自動(dòng)換行,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
vue如何設(shè)置動(dòng)態(tài)的柵格占位、水平偏移量、類名、樣式
這篇文章主要介紹了vue如何設(shè)置動(dòng)態(tài)的柵格占位、水平偏移量、類名、樣式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
process.env?是?Node.js?中的一個(gè)環(huán)境對(duì)象，其中保存著系統(tǒng)的環(huán)境的變量信息，可使用?Node.js?命令行工具直接進(jìn)行查看，這篇文章主要介紹了Vue中配置process.env詳解,需要的朋友可以參考下2023-03-03