快捷導(dǎo)航

vue3中sync修飾符的使用詳解

更新時(shí)間：2023年10月07日 09:45:41 作者：CamphorBloom

.sync修飾符是Vue中用于實(shí)現(xiàn)子組件修改父組件傳遞的props值并更新到父組件的功能,它實(shí)際上是一個(gè)語(yǔ)法糖,將子組件的props綁定到一個(gè)名為update:propName的自定義事件上,本文給大家介紹了vue3中sync修飾符的使用,需要的朋友可以參考下

props是子組件與父組件進(jìn)行通信的常用方式，使用步驟主要有以下幾個(gè)：

1. 在子組件中定義props要從父組件接收的變量（變量的類型必須寫(xiě)明，默認(rèn)值可選）

// 這里以 document.vue 子組件為例
// 通過(guò) defineProps 宏的方式聲明， props 接受父組件傳遞過(guò)來(lái)的數(shù)據(jù)
const props = defineProps({
  title: {
    type: String,
    default: 'Default title'
  }
})

2. 父組件引入子組件，并綁定父組件的變量傳遞給子組件。

// 這里 App.vue 為父組件
import document from './components/document.vue'
const title = ref("標(biāo)題")
// ......
<document :title="title"></document>

3. 在子組件中分別打印props和使用props中的數(shù)據(jù)。

console.log("props: ", props);
 // ......
// 在template 模板中不需要通過(guò)props.title方式獲取
<template>
<div> {{ title }} </div>
</template>

子組件欲更改父組件數(shù)據(jù)時(shí)，首先必須明確一個(gè)原則：誰(shuí)的數(shù)據(jù)誰(shuí)來(lái)維護(hù)，不能直接通過(guò)props來(lái)修改（雖說(shuō)可以改變，但不允許，破壞了數(shù)據(jù)單向流）。官方給我們提供了emits去處理子組件向父組件數(shù)據(jù)通信的問(wèn)題，分為以下幾個(gè)步驟：

1. 在子組件中定義emits要向父組件觸發(fā)的事件（事件可以有多個(gè)）。

// 通過(guò) defineEmits 宏的方式聲明
const emit = defineEmits(['update:title'])

2. 子組件手動(dòng)觸發(fā)事件，并傳入更新的數(shù)據(jù)。

// document.vue
<button @click="changeTitle()">click</button>
// ......
const changeTitle = (newTitle = “新標(biāo)題”) => {
  emit('update:title', newTitle)
}

3. 父組件在子組件標(biāo)簽中綁定同名的事件，并賦值為更新后的數(shù)據(jù)。

// App.vue
<document :title="title" @update:title="(v) => title = v"></document>

這里的事件名“update:eventName”為固定寫(xiě)法，vue于v2.3引入sync修飾符，省去了在組件標(biāo)簽內(nèi)寫(xiě)@update函數(shù)。

使用sync修飾符：

// App.vue
 <document :title.sync="title" @change-title="(v) => title = v"></document>
<!--    <document :title.sync="title" @changeTitle="(v) => title = v"></document>-->
<!--    <document :title.sync="title" @ChangeTitle="(v) => title = v"></document>-->
// document.vue 添加 changeTitle 事件
const emit = defineEmits(['update:title', 'changeTitle'])

另外這里綁定的changeTitle事件為kebab-case（短橫線命名），駝峰和大駝峰命名均可。

到此這篇關(guān)于vue3中sync修飾符的使用詳解的文章就介紹到這了,更多相關(guān)vue3 sync修飾符使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: