1.父子通信
1.父组件（parent.vue）
<template>
<div id="parentBig">
<Child :dmsg="msg"></Child>
</div>
</template>
<script>
import child from '@/components/child'
export default {
data(){
return {
msg:'要传递的信息'
}
},
components:{
Child
}
}
</script>
- 子组件（child.vue）
<template>
<div id="childBig">
<h1>{{dmsg}}</h1>
</div>
</template>
<script>
export default {
props: ['dmsg'],// 使用props接收
data(){
return {
}
},
}
</script>
2.子父通信
1.子组件（child.vue）
<template>
<div id="childBig">
<button @click="click1">点击</button>
</div>
</template>
<script>
export default {
data(){
return {
}
},
methods:{
click1(){
// 添加自定义事件
//参数1：自定义事件名(string形式) 参数2：需要传递的值
this.$emit('Dream', 'aaa')
}
}
}
</script>
2.父组件（parent.vue）
<template>
<div id="parentBig">
<h1>{{title}}</h1>
<child @Dream="fn"></child>
<!-- @自定义事件名="调用的函数" -->
</div>
</template>
<script>
import child from '@/components/child'
export default {
data(){
return {
title:'文字ing'
}
},
methods:{
fn(res){
console.log('接收自定义事件传的参数',res)
this.title = '已更改为传来的参数：'+res
}
},
components:{
child
}
}
</script>
3.非父子通信（未完）
