快捷導(dǎo)航

vue3中setup-script的應(yīng)用實(shí)例

更新時(shí)間：2022年01月18日 10:40:55 作者：MWH

script-setup是一個(gè)比較有爭(zhēng)議的新特性,作為 setup 函數(shù)的語(yǔ)法糖,褒貶不一,不過經(jīng)歷了幾次迭代之后,目前在體驗(yàn)上來(lái)說,感受還是非常棒的,這篇文章主要給大家介紹了關(guān)于vue3中setup-script應(yīng)用的相關(guān)資料,需要的朋友可以參考下

新特性的產(chǎn)生背景

在了解它怎么用之前，可以先了解一下它被推出的一些背景，可以幫助你對(duì)比開發(fā)體驗(yàn)上的異同點(diǎn)，以及了解為什么會(huì)有這一章節(jié)里面的新東西。

在 Vue 3.0 的 .vue 組件里，遵循 SFC 規(guī)范要求（注：SFC，即 Single-File Component，.vue 單組件），標(biāo)準(zhǔn)的 setup 用法是，在 setup 里面定義的數(shù)據(jù)如果需要在 template 使用，都需要 return 出來(lái)。

如果你使用的是 TypeScript ，還需要借助 defineComponent 來(lái)幫助你對(duì)類型的自動(dòng)推導(dǎo)。

<!-- 標(biāo)準(zhǔn)組件格式 -->
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup () {
    // ...

    return {
      // ...
    }
  }
})
</script>

關(guān)于標(biāo)準(zhǔn) setup 和 defineComponent 的說明和用法，可以查閱全新的 setup 函數(shù) 一節(jié)。

script-setup 的推出是為了讓熟悉 3.0 的用戶可以更高效率的開發(fā)組件，減少一些心智負(fù)擔(dān)，只需要給 script 標(biāo)簽添加一個(gè) setup 屬性，那么整個(gè) script 就直接會(huì)變成 setup 函數(shù)，所有頂級(jí)變量、函數(shù)，均會(huì)自動(dòng)暴露給模板使用（無(wú)需再一個(gè)個(gè) return 了）。

上次寫了關(guān)于自己初次使用vue3的一些感受，同時(shí)也獲取了一眾大佬的教導(dǎo)，其中最重要的是方法的setup的語(yǔ)法糖，為了搞清楚這個(gè)語(yǔ)法糖，我自己有把之前的頁(yè)面，又重新重構(gòu)了一次。果然得到真香定律，使用以后發(fā)現(xiàn)原來(lái)vue3還可以像react那樣簡(jiǎn)潔的處理方法和傳值，話不多說上代碼看下吧

內(nèi)部變量

首先看下內(nèi)部變量變化，這是單純之前使用setup

    <template>
    <div>
       <div>
            子組件內(nèi)String：{{infor}}
       </div>
        <div>
            子組件內(nèi)obj：{{obj.data}}
        </div>
        <div>
            子組件內(nèi)arry：{{arry[0]}}
        </div>
        <div @click="changeInfor">
            改變obj
        </div>
    </div>
   
</template>

<script>
    import { ref, onMounted, defineEmits, defineProps, defineExpose, reactive } from "vue";
    export default {
        setup(){
             const infor = ref('infor')
             const obj  = reactive({
                data:'obj'
            })
            const arry  = reactive([111,222,333])
            const changeInfor  = () =>{
                obj.data = 'changeObj'
            }

            return {
                infor, obj, arry, changeInfor
            }
        }
    }
</script>

<style>
  div{
      line-height: 40px;
  }
</style>

這是改成語(yǔ)法糖之后的代碼

    <template>
    <div>
       <div>
            子組件內(nèi)String：{{infor}}
       </div>
        <div>
            子組件內(nèi)obj：{{obj.data}}
        </div>
        <div>
            子組件內(nèi)arry：{{arry[0]}}
        </div>
        <div @click="changeInfor">
            改變obj
        </div>
    </div>
   
</template>

<script setup>
      import { ref, onMounted, defineEmits, defineProps, defineExpose, reactive } from "vue";
      const infor = ref('infor')
      const obj  = reactive({
          data:'obj'
      })
      const arry  = reactive([111,222,333])
      const changeInfor  = () =>{
          infor.value = '32323'
          obj.data = 'changeObj'
      }
</script>

<style>
  div{
      line-height: 40px;
  }
</style>

這里可以明顯看出來(lái)，未使用setup-script的方式，跟傳統(tǒng)的還是有很大區(qū)別的，結(jié)構(gòu)簡(jiǎn)單明了，不需要把大量的變量和方法都寫在setup這個(gè)函數(shù)里面，自由度很高，有點(diǎn)像react的類里面的使用方法

子父級(jí)傳值

這里面主要涉及到三個(gè)方法 defineEmits，defineProps，defineExpose

// 父組件
<template>
    <div>
        父組件
        <children ref="child" @getData="sentData" :data="data"/>
        <div>{{childData || '我還沒收到值'}}</div>
        <div @click="makeClid">點(diǎn)擊調(diào)用子組件方法</div>
    </div>
</template>
<script setup>
  import { ref, onMounted, defineEmits, defineProps, defineExpose, reactive } from "vue";
  import children from './components/children.vue'
  const childData = ref('')
  const data = ref('父組件給的值prop傳值')
  const sentData = (data) =>{
    childData.value = data
  }
  const child = ref(null) // 獲取子組件ref
  const makeClid = () =>{
    child.value.setData('子組件已調(diào)用')
  }
</script>


// 子組件
<template>
    <div>
       {{fatherData || '父組件還未調(diào)用我'}}
       <div @click="getData">觸發(fā)父組件</div>
       <div>fatherProps:{{fatherProps}}</div>
    </div>
   
</template>

<script setup>
      import { ref, onMounted, defineEmits, defineProps, defineExpose, reactive } from "vue";
      const fatherData = ref('')
      const fatherProps = ref('')
      const props = defineProps({ // 父組件傳值
          data:String
      })
        fatherProps.value = props.data
      const emit = defineEmits(['getData']) // 接受父組件數(shù)據(jù)
      const getData = () =>{
          emit('getData','給父組件的值')  // 觸發(fā)父組件的方法
      }

      const setData = (val) =>{ // 父組件調(diào)用
          fatherData.value = val
      }

      defineExpose({  // 拋出方法
            getData,
            setData
        })
</script>

子組件調(diào)用父組件：這點(diǎn)很好理解，跟vue2差不多的形式，父組件里面掛載@getData，子組件里面通過defineEmits這個(gè)方法獲取，最后調(diào)用方式跟之前也是一樣的
父組件調(diào)用子組件：這點(diǎn)區(qū)別還是很大的，需要子組件先定義好方法，然后通過defineExpose暴露出去，父組件創(chuàng)建ref,這里需要?jiǎng)?chuàng)建的變量名字和子組件的ref名字一直，否者獲取不到，最后通過獲取拋出的value找到對(duì)應(yīng)的方法。