Vue基础知识总结 6：vue双向绑定原理
生活随笔
收集整理的這篇文章主要介紹了
Vue基础知识总结 6：vue双向绑定原理
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
🍅 作者簡介：哪吒，CSDN2021博客之星亞軍🏆、新星計劃導師?、博客專家💪
🍅 哪吒多年工作總結：Java學習路線總結，搬磚工逆襲Java架構師
🍅 關注公眾號【哪吒編程】，回復1024，獲取Java學習路線思維導圖、大廠面試真題、加入萬粉計劃交流群、一起學習進步
目錄
一、前端代碼初體驗
1、代碼實例
2、瀏覽器顯示
?二、根據異常改進
1、監聽事件，反向賦值
?2、代碼實例
3、瀏覽器顯示
三、聯動修改num1的值
1、代碼實例
2、瀏覽器顯示
四、watch
五、通過$refs完成父訪問子
需求分析：
通過輸入框，雙向綁定文本框顯示。
一、前端代碼初體驗
1、代碼實例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app"><cpn :number1="num1":number2="num2"/> </div><template id="cpn"><div><h2>{{number1}}</h2><input type="text" v-model="number1"><h2>{{number2}}</h2><input type="text" v-model="number2"></div> </template><script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {num1: 1,num2: 0},components: {cpn: {template: '#cpn',props: {number1: Number,number2: Number},}}}) </script></body> </html>2、瀏覽器顯示
錯誤信息
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "number1"
谷歌翻譯 -->
避免直接改變 prop，因為每當父組件重新渲染時，值都會被覆蓋。 相反，根據道具的值使用數據或計算屬性。 道具被變異：“number1”
這時候要完成雙向綁定怎么辦呢？
紅色異常顯示，希望在data中定義一個其它屬性。
輸入框綁定方法：
?二、根據異常改進
1、監聽事件，反向賦值
?2、代碼實例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app"><cpn :number1="num1":number2="num2"/> </div><template id="cpn"><div><h2>{{number1}}</h2><h2>{{dnumber1}}</h2><input type="text" v-model="dnumber1"><h2>{{number2}}</h2><h2>{{dnumber2}}</h2><input type="text" v-model="dnumber2"></div> </template><script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {num1: 1,num2: 0},components: {cpn: {template: '#cpn',props: {number1: Number,number2: Number},data(){return{dnumber1:this.number1,dnumber2:this.number2}}}}}) </script></body> </html>3、瀏覽器顯示
三、聯動修改num1的值
1、代碼實例
但是，我想通過反向傳到父組件中，也就是改變number1的值，也就是改變data中的num1，怎么整？
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app"><cpn :number1="num1":number2="num2"@num1change="num1change"@num2change="num2change"/> </div><template id="cpn"><div><h2>props:{{number1}}</h2><h2>data:{{dnumber1}}</h2><!--<input type="text" v-model="dnumber1">--><input type="text" :value="dnumber1" @input="num1Input"><h2>props:{{number2}}</h2><h2>data:{{dnumber2}}</h2><!--<input type="text" v-model="dnumber2">--><input type="text" :value="dnumber2" @input="num2Input"></div> </template><script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {num1: 1,num2: 0},methods: {num1change(value) {this.num1 = parseFloat(value)},num2change(value) {this.num2 = parseFloat(value)}},components: {cpn: {template: '#cpn',props: {number1: Number,number2: Number},data() {return {dnumber1: this.number1,dnumber2: this.number2}},methods: {num1Input(event) {// 1.將input中的value賦值到dnumber中this.dnumber1 = event.target.value;// 2.為了讓父組件可以修改值, 發出一個事件this.$emit('num1change', this.dnumber1)// 3.同時修飾dnumber2的值this.dnumber2 = this.dnumber1 * 100;this.$emit('num2change', this.dnumber2);},num2Input(event) {this.dnumber2 = event.target.value;this.$emit('num2change', this.dnumber2)// 同時修飾dnumber2的值this.dnumber1 = this.dnumber2 / 100;this.$emit('num1change', this.dnumber1);}}}}}) </script></body> </html>2、瀏覽器顯示
四、watch
watch關鍵是監聽某一屬性的改變，是上面寫法的一種變形寫法。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app"><cpn :number1="num1":number2="num2"@num1change="num1change"@num2change="num2change"/> </div><template id="cpn"><div><h2>props:{{number1}}</h2><h2>data:{{dnumber1}}</h2><input type="text" v-model="dnumber1"><h2>props:{{number2}}</h2><h2>data:{{dnumber2}}</h2><input type="text" v-model="dnumber2"></div> </template><script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {num1: 1,num2: 0},methods: {num1change(value) {this.num1 = parseFloat(value)},num2change(value) {this.num2 = parseFloat(value)}},components: {cpn: {template: '#cpn',props: {number1: Number,number2: Number,name: ''},data() {return {dnumber1: this.number1,dnumber2: this.number2}},watch: {dnumber1(newValue) {this.dnumber2 = newValue * 100;this.$emit('num1change', newValue);},dnumber2(newValue) {this.number1 = newValue / 100;this.$emit('num2change', newValue);}}}}}) </script></body> </html>五、通過$refs完成父訪問子
父子組件通信
在開發中，往往有一些數據需要送上層傳遞到下層；
比如在一個頁面中，我們從服務器請求到很多的數據，其中一部分數據，并非是我們整個頁面大組件的，需要在子組件中進行展示，這時，并不會讓子組件再次請求一次，而是直接從父組件將數據傳遞給子組件。
那么如何傳遞呢？
官方提到：
通過props向子組件傳遞數據；
通過事件向父組件傳遞數據；
一般不推薦使用$children，$children一般用于拿到所有組件的時候使用。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app"><cpn></cpn><cpn></cpn><my-cpn></my-cpn><y-cpn></y-cpn><cpn ref="aaa"></cpn><button @click="btnClick">按鈕</button> </div><template id="cpn"><div>我是子組件</div> </template> <script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {message: '你好啊'},methods: {btnClick() {// 1.$children// console.log(this.$children);// for (let c of this.$children) {// console.log(c.name);// c.showMessage();// }// 拿第三個組件的內容，但是下標值不太好用// console.log(this.$children[3].name);// 2.$refs => 對象類型, 默認是一個空的對象 ref='bbb'console.log(this.$refs.aaa.name);}},components: {cpn: {template: '#cpn',data() {return {name: '我是子組件的name'}},methods: {showMessage() {console.log('showMessage');}}},}}) </script></body> </html>上一篇：Vue基礎知識總結 5：vue實現樹形結構
下一篇：Vue基礎知識總結 7：插槽slot與vue導入導出
關注公眾號，備注1024，獲取Java學習路線思維導圖、加入萬粉計劃交流群??
總結
以上是生活随笔為你收集整理的Vue基础知识总结 6：vue双向绑定原理的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一、冠词
- 下一篇： 行业观察：OA产品泛滥，如何慧眼如炬？