自定義事件
tips
- 推薦始終使用 kebab-case 的事件名，（v-on會將事件名自動轉換為小寫，避免匹配不到）
- changeData ×
- change-data √
自定義組件的v-model
- 用法：
- 父組件定義資料源（不需要定義修改資料的方法），在子組件標簽上通過
v-model="data"進行傳遞 - 默認傳遞的屬性名是
value,事件名為input，可以在子組件中配置model選項重命名屬性名和事件名 - 子組件props接受名稱為value的屬性（固定名）,通過
$emit("input", payload)在子組件即可修改資料，形成雙向系結
- 父組件定義資料源（不需要定義修改資料的方法），在子組件標簽上通過
// 父組件
<template>
<div>
<p>我是dad</p>
<span>{{ dadData }}</span>
<Son v-model="dadData" />
</div>
</template>
<script>
import Son from "./SonItem.vue";
export default {
components: {
Son,
},
data() {
return {
dadData: "我是爹地",
};
},
};
</script>
// 子組件
<template>
<div>
<p>我是兒子組件</p>
<input type="text" :https://www.cnblogs.com/yuyunhao/archive/2022/07/29/value="value" @input="sonInput" />
<button @click="btnClick(Date.now())">點擊</button>
</div>
</template>
<script>
export default {
// 如果重命名，記得這里也要修改哦 props: ["novalue]
props: ["value"],
// 這里可以重命名接收到的屬性值和事件名
// model: {
// prop: "novalue",
// event: "changeNoval",
// },
methods: {
sonInput(e) {
this.$emit(`input`, e.target.value);
},
btnClick(data) {
this.$emit(`input`, data);
},
},
};
</script>
.sync 修飾符
-
為什么會有這個修飾符？它解決了什么問題？
- 正常我們父子組件通信是父組件props傳參，v-on監聽改變資料的事件，子組件通過$emit去觸發，
- 父組件每次都要定義類似的事件函式this.data = https://www.cnblogs.com/yuyunhao/archive/2022/07/29/newData，如果是一個物件，那么它的每個屬性傳遞過去都要定義相應的事件函式（麻煩重復的代碼變多了）
- .sync就是用來簡化這塊的代碼
-
怎么使用.sync？
- 父組件直接在子組件標簽上使用
:name.sync="person.name" - 默認發送的處理的事件名為
update:name,name就是你傳過去的屬性名 - 如果需要使用屬性，子組件可以通過props接收，也可以使用
$attr，$parent等獲取，注意：props接收過的屬性不會出現在當前實體的$attr中 - 如果需要觸發事件，可以使用
$emit("update:屬性名", payload)，也可以使用$listener - 使用
v-bind.sync="obj"可以把obj物件中的每個屬性和事件自動分發給子組件
- 父組件直接在子組件標簽上使用
// 父組件
<template>
<div>
<p>我是dad</p>
<span>{{ dadData }}</span>
<Son :something.sync="dadData" v-bind.sync="dadObj" />
</div>
</template>
<script>
import Son from "./SonItem.vue";
export default {
components: {
Son,
},
data() {
return {
dadData: "我是爹地",
dadObj: {
girlFriends: ["dingding", "momo", "weiwei"],
age: 24,
},
};
},
};
</script>
// 子組件
<template>
<div>
<p>我是兒子組件</p>
<button @click="btnClick(Date.now())">點擊</button>
<span>{{ something }}</span>
<span>{{ girlFriends }}</span>
</div>
</template>
<script>
export default {
props: ["something", "girlFriends"],
methods: {
btnClick(data) {
this.$emit(`update:something`, data);
},
},
mounted() {
this.$listeners["update:girlFriends"](["singleDog"]);
// {age: 24}
console.log(this.$attrs);
},
};
</script>
思考
v-model和.sync本質都是語法糖，設計出來就是為了方便使用減少代碼量，不過更利于使用的封裝究竟是方便新手的上手還是加重了學習負擔，可能各執己見吧
文章只是個人學習檔案并記錄總結，具體細節請自行查閱官方檔案
https://cn.vuejs.org/v2/guide/components-custom-events.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/500585.html
標籤：其他
上一篇：05js陣列