Vue工程化開發通過V-model 基本實作 跨組件資料系結
眾所周知在vue工程化開發的模式下面可以增加專案的開發進度;也快速的提高了我們對新型開發模式和尖端開發技術的要求; 但是對于剛入門或者剛接觸Vue工程化開發模式(我們稱之為腳手架)會存在對于組件之間的相互傳送資料非常迷茫;小編在剛接觸的時候也是一臉迷茫;但是隨著接觸和認識越來越多你慢慢的會發現這里面到的邏輯其實非常簡單的;下面我們進入正題來說一下腳手架里面怎么通過V-model這個這個VUE內置指令 來實作跨組件系結內容
1.了解V-model的原理
V-model是Vue內置的指令,我們可以通過來實作V變數和表單內容的雙向系結;也就是說用來實作資料的雙向系結(MVVM)即資料層和視圖層的雙向系結;從而可以快速的操作內容資料 也就實作了Vue從不直接操作DOM的說法
2.V-model的深層次拆分
V-model 之所以在腳手架里面實作資料雙向系結 是應為Vue內置 給我們系結了value和input事件,人家直接封裝好的,所以我們可以直接拿過來使用;
在表單里面value可以直接收集資料內容 然而input事件可以通過觸發把收集到的內容賦值給V變數 ;
v-model
value === Vue變數 -> 視圖
@input事件 === Vue變數 <- 視圖;
代碼實作:
<div>
<input type="text" :value="msg" @input="fn">
</div>
<script>
// 目標: 用vue自己實作v-model的功能
// v-model功能: 雙向資料系結
// 表單標簽value 和 vue的變數 雙向系結
// view層 - model層 (MVVM設計模式), 互相關聯
// 頁面改變 -> 變數
// 頁面改變 <- 變數
export default {
data () {
return {
msg: 'hello'
}
},
methods: {
fn (e) {
this.msg = e.target.value // 視圖里的最新value值賦予給msg變數 (View -> Model)
}
}
}
3.通過V-mode特性和輔助組件來實作跨組件的變數系結
廢話少說直接代碼演示;
目標: 父子組件之間, 變數的"雙向系結"
父組件的代碼:
<div>
<p>父組件: {{ num }}</p>
<!-- <Child :value="num" @input="fn"></Child> -->
<Child v-model="num"></Child>
</div>
<script>
// 目標: 父子組件之間, 變數的"雙向系結"
import Child from './Child'
export default {
data () {
return {
num: 10
}
},
methods: {
fn (a) {
this.num = a
}
},
components: {
Child
},
}
</script>
子組件代碼:
<template>
<div>
<p>子組件 {{ value }}</p>
<button @click="addFn">+</button>
</div>
</template>
<script>
// "value屬性"-必須這個名字
// 傳出去值, 必須用"input事件"
export default {
props: {
value: Number
},
methods: {
addFn () {
const a = this.value + 1
this.$emit('input', a)
}
}
}
</script>
4.總結;
結合上述,加上代碼的分析相信大家基本也可以實作跨組件的資料系結了;
小編創作水平有限;如有不足請大家私信我…小編初入博客多多指教…
<不喜勿噴>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/282841.html
標籤：AI
上一篇：二叉樹，堆詳解