父子组件通信：子组件使用父组件数据（属性和方法）。vue是单项数据流，因此在通常情况下都是父组件传递数据给子组件使用，子组件触发父组件的事件，并传递给父组件所需要的参数。
父组件调用子组件并通过自定义属性传入数据，子组件通过props接收父组件传递的数据，进行验证使用。
代码演示：
<!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>vue父子组件通信</title>
<!-- 使用CDN引入Vue -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data(){
return {
num: 0
}
},
//父组件通过自定义属性 count 传参
template:`<demo :count="num"/>`
})
app.component('demo', {
//子组件通过 props 接收父组件传递的参数
props:['count'],
//子组件在模板中使用父组件传递过来的参数
template:`<div>{{count}}</div>`
})
const vm = app.mount('#root');
</script>
</body>
</html>
页面效果：
子组件通过$emit自定义事件，向父组件进行传值；
父组件使用子组件自定义事件，通过事件方法接收子组件的传值；
代码演示：
<script>
const app = Vue.createApp({
data(){
return {
num: 0
}
},
methods: {
handleAddOne( param ){
this.num = param;
}
},
//父组件使用子组件自定义事件
template:`<demo :count="num" @add-one="handleAddOne"/>`
})
app.component('demo', {
props:['count'],
methods: {
handleClick(){
//子组件通过$emit自定义事件，向父组件传值
this.$emit('addOne', this.count + 5);
}
},
template:`<div @click="handleClick">{{count}}</div>`
})
const vm = app.mount('#root');
</script>
页面效果：
初始状态
点击一次
点击两次
点击触发事件，页面效果符合预期。
代码演示：
<script>
const app = Vue.createApp({
data(){
return {
num: 0
}
},
methods: {
handleAddOne( param ){
this.num += param;
}
},
template:`<demo v-model="num"/>`
})
app.component('demo', {
props:['modelValue'], // props 接受参数必须是 modelValue
methods: {
handleClick(){
this.$emit('update:modelValue', this.modelValue + 5);
// update:modelValue 也是固定写法
}
},
template:`<div @click="handleClick">{{modelValue}}</div>`
})
const vm = app.mount('#root');
</script>
props 参数可以换成其他参数名（如：app），但要在子组件上修改为 v-model:其他参数名（如：v-model:app）。
<script>
const app = Vue.createApp({
data(){
return {
num: 0
}
},
methods: {
handleAddOne( param ){
this.num += param;
}
},
template:`<demo v-model:app="num"/>`
})
app.component('demo', {
props:['app'],
methods: {
handleClick(){
this.$emit('update:app',this.app + 5);
}
},
template:`<div @click="handleClick">{{app}}</div>`
})
const vm = app.mount('#root');
</script>
代码演示：
<script>
const app = Vue.createApp({
data(){
return {
num: 0,
num1: 0
}
},
methods: {
handleAddOne( param ){
this.num += param;
}
},
template:`<demo v-model:app="num" v-model:app1="num1"/>`
})
app.component('demo', {
props:['app',"app1"],
methods: {
handleClick(){
this.$emit('update:app',this.app + 5);
},
handleClick1(){
this.$emit('update:app1',this.app1 + 5);
}
},
template:`
<div @click="handleClick">{{app}}</div>
<div @click="handleClick1">{{app1}}</div>
`
})
const vm = app.mount('#root');
</script>
父子组件通信：vue是单项数据流，父组件传递数据给子组件使用，子组件触发父组件事件对数据进行处理
父组件向子组件通信：使用props传递数据
子组件向父组件通信：使用$emit触发父组件的事件
（完）