关于组件之间的通信主要是看业务，是父到子，还是子到父。以下的例子我会配上具体的应用情景。
情景一：
父组件传值给子组件（为了降低父组件复杂程度，往往会将表格，表单等进行组件化，抽离成单个的组件）
做法：子组件child：声明一个props属性
//对象形式
props: {
editData: {
type: Object
}
}
//字符串数组形式
props: ['rowData']
父组件：绑定子组件声明的那个属性
<edit-manage :editData="manageEditData" ref="editProxy"></edit-manage>
<eye-manage :rowData="eyeData"></eye-manage>
manageEditData 和 eyeData都是父组件data里的变量，这样我们就完成了父组件到子组件的传值。注意：这种传值方式的单向的，当父组件的数据变化会更新prop属性，完成数据的更新。
情景二：
子组件向父组件传值（子组件如果包含表单等需要填写的数据，在父组件中的提交操作需要其作为参数传递到后台）
做法一：
父组件直接取值：父组件通过this.$ref来获取子组件的数据
在父组件中引入子组件，通过给子组件添加ref属性，利用this.$ref对象来获取子组件的值，下面来一个demo看看这个this.$ref打印出来会是什么样子
<template>
<div class="hello">
<child ref="child"></child>
</div>
</template>
<script>
import child from './child'
export default {
name: 'HelloWorld',
data () {
return {
}
},
components: {
child
},
mounted () {
console.log(this.$refs)
}
}
</script>
<style lang="stylus" scoped>
</style>
看看控制台：
image.png
如果我们需要获取child子组件form表单的值，可以通过
this.$ref['child']来获取child子组件data的任意值，来看看代码和控制台：
mounted () {
console.log(this.$refs['child'].child.name)
console.log(this.$refs['child'].child.age)
}
页面上的输入框：
image.png
控制台：
image.png
这样我们就可以获取到了
做法二：通过$emit()和v-on
先来看子组件child：
<template>
<div>
<button @click="save">保存</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
child:{
name:'childname',
age:11
}
}
},
methods:{
save(){
this.$emit('saveHandle',[this.child,1,2,3,4]) //传递一个数组
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
</style>
父组件：
<template>
<div>
<child ref="child" v-on:saveHandle="save"></child>
</div>
<template>
<script>
import child from './child'
export default {
name: 'HelloWorld',
data () {
return {
}
},
components: {
child
},
methods:{
save(data){
console.table(data) //接收子组件child传过来的数据
}
}
}
</script>
看看控制台：
image.png
获取到子组件传递的值了就可以为所欲为了
网友评论