父子组件通信在vue项目中常常用到，但一段时间不用总会忘记，这次记下来。
一、父组件传给子组件
方法一：
1. 简单，使用props传递数据，父组件调用子组件并传递数据，数据包括属性和方法（String,Number,Boolean,Object, Array ,Function），子组件内用props接收。
- 例：父组件：
<child :message="hello"></child> //这里的message就是通信对应的“接口”,hello是父组件内的data或function
对应子组件内:
<script> props:[ 'message' ] </script>
在子组件内用起来和data一样。
3. 注意：props是单向数据流，父组件属性变化时，会传递给子组件，反过来不会。这是为了防止子组件修改了父组件的状态后，数据流变得难以理解。若强行在子组件内改变props，vue会在控制台给出警告。
如果需要将其值作为局部数据来用或者处理成其他数据输出，那么可以在data中定义变量，用props初始化来使用；若需要处理，可以在computed属性中计算返回使用。
方法二：
1. 通过$on传递父组件方法，直观的表现了子组件主动调用父组件的数据。
- 例：
父组件：
<template>
<div>
<h3>父组件</h3>
<child @childEvent = "parentMethod"></child> //childEvent作为‘接口’，调用父组件的方法parentMethod
</div>
</template>
<script>
import child from '@/../child';
export default{
components:{child},
data(){
return{
parentMsg:"来自父组件的消息",
}
},
method{
parentMethod(){
alert(this.parentMsg)
}
}
}
</script>
子组件：
<template>
<div>
<h3>我是子组件</h3>
</div>
</template>
<script>
export default{
mounted(){
this.$emit('childEvent') //子组件通过emit调用父组件方法，childEvent作为‘接口’连接
}
}
</script>
二、子组件传给父组件
方法一：$emit触发
1. 通过$emit触发，子组件主动触发父组件事件，同时传递数据。子传父不能像父传子那样直接传递直接接收，需要通过触发事件通知父组件才能传递。
- 例：
子组件： //子组件名：relationAnalyzeDialog
<template>
<button @click = "dialogFormEvent">取消</button> //触发通知父组件的方法（有点绕，理解了就好懂）
</template>
<script>
export default{
data(){
return{
dialogFormVisible:false,
}
},
methods:{
dialogFormEvent(){
this.dialogFormVisible = false;
this.$emit('change', this.dialogFormVisible) //触发change，change是子父组件通信的对应的“接口”， this.dialogFormVisible 为向父组件传递的数据
}
}
}
</script>
父组件：
<template>
<relationAnalyzeDialog @change = "dialogForm" :msg = "msg"></relationAnalyzeDialog> //监听子组件触发的change，调用本身的dialogForm方法，并
</template>
<script>
components:{
relationAnalyzeDialog
},
data(){
return {
dialogFormVisible
}
}，
methods:{
dialogForm(msg){
this.dialogFormVisible = msg;
}
}
</script>
方法二：refs获取
-
给子组件添加refs属性，父组件在使用时通过this.$refs.childName....来获取子组件的数据。
-
相当于父组件主动调用子组件的数据。
PS总结：父组件应处于高位，拥有控制权，对外交互的权利应该交由父组件，所以常用的是 props和 $emit。
下回有心得再补充。
网友评论