🍅 Java學習路線：搬磚工逆襲Java架構師
🍅 簡介：Java領域優質創作者🏆、CSDN哪吒公眾號作者? 、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>
🍅 Java學習路線：搬磚工逆襲Java架構師
🍅 簡介：Java領域優質創作者🏆、CSDN哪吒公眾號作者? 、Java架構師奮斗者💪
🍅 掃描主頁左側二維碼，加入群聊，一起學習、一起進步
🍅 歡迎點贊 👍 收藏 ?留言 📝
往期精彩回顧
【Vue基礎知識總結 1】Vue入門
【Vue知識體系總結 2】Vue動態系結v-bind
【Vue知識體系總結 3】Vue常用標簽
【Vue知識體系總結 4】Vue組件化開發
【Vue基礎知識總結 5】Vue實作樹形結構
【Vue基礎知識總結 6】Spring Boot + Vue 全堆疊開發，都需要哪些前端知識？
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/304921.html
標籤：java