5、父子组件如何通过事件进行通信
子组件调用的方法让父组件处理
子组件调用父组件的方法来改变父组件的数据。子组件无法改变父组件传过来的数据，可以通过此方法请求父组件来进行改变！
<!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 ++;
}
},
// 父组件监听子组件要调用的方法，指向一个方法
// 注意这里的 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
子组件调用父组件的方法并传参数
<!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;
}
},
// 父组件监听子组件要调用的方法，指向一个方法
// 注意这里的 handleAdd 不能带 () ，因为带括号就意味着明确没有传参数
template: `
<div>
<test :count="count" @add="handleAdd" />
</div>
`
});
app.component('test',{
props:['count'],
methods:{
// 我们知道在这里我们不能修改 count 的值，因为它来自父组件
// 但有时候我们确实需要修改这个值，我们就告诉父组件让父组件修改它
// 也就是子组件告诉父组件自己想要调用一个方法
// 注意，这里的 add 不能带 () 括号
// 可以传多个参数，父组件事件中使用对应数量的参数接收即可
add(){
this.$emit('add', 5)
}
},
template: `
<div @click="add()">{{count}}</div>
`
})
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210613150236756.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() 方法
handleAdd(param){
this.count = param;
}
},
// 父组件监听子组件要调用的方法，指向一个方法
// 注意这里的 handleAdd 不能带 () ，因为带括号就意味着明确没有传参数
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
校验子组件对外触发的事件
在子组件里面写一个 emits: ['方法名'] 来实现校验，因为当子组件里面的内容太多的话就影响可读性，把对外触发的事件全写在这里面有助于阅读！
<!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 属性，那么对外触发的时候都要写进来，否则会警告
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 属性，那么对外触发的时候都要写进来，否则会警告
emits: {
// 检验参数
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
