5近速、父子組件如何通過事件進行通信
子組件調用的方法讓父組件處理
子組件調用父組件的方法來改變父組件的數(shù)據(jù)囤采。子組件無法改變父組件傳過來的數(shù)據(jù)悲没，可以通過此方法請求父組件來進行改變够傍！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue庫 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return{
count: 1
}
},
methods:{
// 在這里寫一個 handleAddOne() 方法
handleAddOne(){
this.count ++;
}
},
// 父組件監(jiān)聽子組件要調用的方法畜挥，指向一個方法
// 注意這里的 addOne 最好寫成 add-one
template: `
<div>
<test :count="count" @add-one="handleAddOne()" />
</div>
`
});
app.component('test',{
props:['count'],
methods:{
// 我們知道在這里我們不能修改 count 的值仔粥，因為它來自父組件
// 但有時候我們確實需要修改這個值，我們就告訴父組件讓父組件修改它
// 也就是子組件告訴父組件自己想要調用一個方法
// 注意蟹但，這里的 addOne 不能帶 () 括號
addOne(){
this.$emit('addOne')
}
},
template: `
<div @click="addOne()">{{count}}</div>
`
})
const vm = app.mount('#root');
</script>
</html>
運行結果
image-20210613145446569.png
子組件調用父組件的方法并傳參數(shù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue庫 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return{
count: 1
}
},
methods:{
// 在這里寫一個 handleAdd() 方法
handleAdd(param){
this.count += param;
}
},
// 父組件監(jiān)聽子組件要調用的方法躯泰，指向一個方法
// 注意這里的 handleAdd 不能帶 () ，因為帶括號就意味著明確沒有傳參數(shù)
template: `
<div>
<test :count="count" @add="handleAdd" />
</div>
`
});
app.component('test',{
props:['count'],
methods:{
// 我們知道在這里我們不能修改 count 的值华糖，因為它來自父組件
// 但有時候我們確實需要修改這個值麦向，我們就告訴父組件讓父組件修改它
// 也就是子組件告訴父組件自己想要調用一個方法
// 注意，這里的 add 不能帶 () 括號
// 可以傳多個參數(shù)客叉，父組件事件中使用對應數(shù)量的參數(shù)接收即可
add(){
this.$emit('add', 5)
}
},
template: `
<div @click="add()">{{count}}</div>
`
})
const vm = app.mount('#root');
</script>
</html>
運行結果
image-20210613150236756.png
在子組件中計算出來后上傳給父組件參數(shù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue庫 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return{
count: 1
}
},
methods:{
// 在這里寫一個 handleAdd() 方法
handleAdd(param){
this.count = param;
}
},
// 父組件監(jiān)聽子組件要調用的方法诵竭，指向一個方法
// 注意這里的 handleAdd 不能帶 () ，因為帶括號就意味著明確沒有傳參數(shù)
template: `
<div>
<test :count="count" @add="handleAdd" />
</div>
`
});
app.component('test',{
props:['count'],
methods:{
// 我們知道在這里我們不能修改 count 的值十办，因為它來自父組件
// 但有時候我們確實需要修改這個值秀撇，我們就告訴父組件讓父組件修改它
// 也就是子組件告訴父組件自己想要調用一個方法
// 注意，這里的 add 不能帶 () 括號
add(){
this.$emit('add', this.count + 3)
}
},
template: `
<div @click="add()">{{count}}</div>
`
})
const vm = app.mount('#root');
</script>
</html>
運行結果
image-20210613150548226.png
校驗子組件對外觸發(fā)的事件
在子組件里面寫一個 emits: ['方法名'] 來實現(xiàn)校驗向族，因為當子組件里面的內容太多的話就影響可讀性呵燕，把對外觸發(fā)的事件全寫在這里面有助于閱讀！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue庫 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return{
count: 1
}
},
methods:{
handleAdd(param){
this.count = param;
}
},
template: `
<div>
<test :count="count" @add="handleAdd" />
</div>
`
});
app.component('test',{
props:['count'],
// 在這里寫一個 add 不會報錯
// 但沒有寫 add 而是寫了一個 addOne 就會警告
// 如果存在 emits 屬性件相，那么對外觸發(fā)的時候都要寫進來再扭，否則會警告
emits: ['addOne'],
methods:{
add(){
this.$emit('add', this.count + 3)
}
},
template: `
<div @click="add()">{{count}}</div>
`
})
const vm = app.mount('#root');
</script>
</html>
運行結果
image-20210613154043173.png
更多的校驗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue庫 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return{
count: 1
}
},
methods:{
handleAdd(param){
this.count = param;
}
},
template: `
<div>
<test :count="count" @add="handleAdd" />
</div>
`
});
app.component('test',{
props:['count'],
// 在這里寫一個 add 不會報錯
// 但沒有寫 add 而是寫了一個 addOne 就會警告
// 如果存在 emits 屬性，那么對外觸發(fā)的時候都要寫進來夜矗，否則會警告
emits: {
// 檢驗參數(shù)
add: (count) => {
if(count > 0){
return true;
}else{
return false;
}
}
},
methods:{
add(){
this.$emit('add', this.count + 3)
}
},
template: `
<div @click="add()">{{count}}</div>
`
})
const vm = app.mount('#root');
</script>
</html>
運行結果
image-20210613154340970.png
父子組件之間的”雙向綁定“
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue庫 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return{
count: 1
}
},
template: `
<div>
<test v-model="count" />
</div>
`
});
app.component('test',{
// modelValue 是固定寫法
props:['modelValue'],
methods:{
add(){
// 固定寫法
this.$emit('update:modelValue', this.modelValue + 3)
}
},
template: `
<div @click="add()">{{modelValue}}</div>
`
})
const vm = app.mount('#root');
</script>
</html>
運行結果
image-20210613154959373.png
自定義modelValue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue庫 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return{
count: 1
}
},
template: `
<div>
<test v-model:app="count" />
</div>
`
});
app.component('test',{
// modelValue 是固定寫法
props:['app'],
methods:{
add(){
// 固定寫法
this.$emit('update:app', this.app + 3)
}
},
template: `
<div @click="add()">{{app}}</div>
`
})
const vm = app.mount('#root');
</script>
</html>
運行結果
image-20210613155101659.png
