目錄

• 新特性的產生背景
• 內部變數
• 子父級傳值
• 總結

新特性的產生背景

在瞭解它怎麼用之前，可以先了解一下它被推出的一些背景，可以幫助你對比開發體驗上的異同點，以及瞭解為什麼會有這一章節裡面的新東西。

在 3.0 的 .vue 元件裡，遵循 SFC 規範要求（注：SFC，即 Single-File Component，.vue 單元件），標準的 setup 用法是，在 setup 裡面定義的資料如果需要在 template 使用，都需要 return 出來。

如果你使用的是 TypeScript ，還需要藉助 defineComponent 來幫助你對型別的自動推導。

<!-- 標準組件格式 -->
<script lang="ts">
import { defineComponent } from 'vue'

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

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

關於標準 setup 和 defineComponent 的說明和用法，可以查閱 全新的 setup 函式 一節。

script-setup 的推出是為了讓熟悉 3.0 的使用者可以更高效率的開發元件，減少一些心智負擔，只需要給 script 標籤新增一個 setup 屬性，那麼整個 script 就直接會變成 setup 函式，所有頂級變數、函式，均會自動暴露給模板使用（無需再一個個 return 了）。

上次寫了關於自己初次使用vue3的一些感受，同時也獲取了一眾大佬的教導，其中最重要的是方法的setup的語法糖，為了搞清楚這個語法糖，我自己有把之前的頁面，又重新重構了一次。果然得到真香定律，使用以後發現原來vue3還可以像react那樣簡潔的處理方法和傳值，話不多說上程式碼看下吧

內部變數

首先看下內部變數變化，這是單純之前使用setup

    <template>
    <div>
       <div>
            子元件內String：{{infor}}
       </div>
        <div>
            子元件內obj：{{obj.data}}
        </div>
        <div>
            子元件內arry：{{arry[0]}}
        </div>
        <div @click="changeInfor">
            改變obj
     www.cppcns.com
 
   </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>

這是改成語法糖之後的程式碼

    <template>
    <div>
       <div>
            子元件內String：{{infor}}
       </div>
        <div>
            子元件內obj：{{obj.data}}
        </div>
        <div>
            子元件內arry：{{arry[0]}}
        </div>
        <div @click="changeInfor">
            改變obj
        </div>
    </div>
   
</template>

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

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

這裡可以明顯看出來，未使用setup-script的方式，跟傳統的還是有很大區別的， 結構簡單明瞭，不需要把大量的變數和方法都寫在setup這個函式裡面，自由度很高，有點像react的類裡面的使用方法

子父級傳值

這裡面主要涉及到三個方法 defineEmits，defineProps，defineExpose

// 父元件
<template>
    <div>
        父元件
        <children ref="child" @getData="sentData" :data="data"/>
        <div>{{childData || '我還沒收到值'}}</div>
        <div @click="makeClid">點選呼叫子元件方法</div>
    </div>
</template>
<script setup>
  import { ref,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('子元件已呼叫')
  }
</script>


// 子元件
<template>
    <div>
       {{fatherData || '父元件還未呼叫我'}}
       <div @click="getData">觸發父元件</div>
       <div>fatherProps:{{fatherProps}}</div>
    </div>
   
</template>

<script setup>
      import { ref,reactive } from "vue";
      const fatherData = ref('')
      const fatherProps = ref('')
      const props = defineProps({ // 父元件傳值
          data:String
      })
        fatherProps.value = props.data
      const emit = defineEmits(['getData']) // 接受父元件資料
      const getData = () =>{
          emit('getData','給父元件的值')  // 觸發父元件的方法
      }

      const setData = (val) =>{ // 父元件呼叫
          fatherData.value = val
      }

      defineExpose({  // 丟擲方法
            getData,setData
        })
</script>

• 子元件呼叫父元件：這點很好理解，跟vue2差不多的形式，父元件裡面掛載@getData，子元件裡面通過defineEmits這個方法獲取，最後呼叫方式跟之前也是一樣的
• 父元件呼叫子元件：這點區別還是很大的，需要子元件先定義好方法，然後通過defineExpose暴露出去，父元件建立ref,這裡需要建立的變數名字和子元件的ref名字一直，否者獲取不到，最後通過獲取丟擲的value找到對應的方法。

總結

到此這篇關於vue3中setup-script應用的文章就介紹到這了,更多相關vue3setup-script應用內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！