vue父子组件通信的高级用法示例

前言

vue项目的一大亮点就是组件化。使用组件可以极大地提高项目中代码的复用率，减少代码量。但是使用组件最大的难点就是父子组件之间的通信。

子通信父

父组件

<template><div class="parent">我是父组件<!--父组件监听子组件触发的say方法，调用自己的parentSay方法--><!--通过:msg将父组件的数据传递给子组件--><children :msg="msg" @say="parentSay"></children></div></template><script>import Children from './children.vue'export default {data () {return {msg: 'hello, children'}},methods: {// 参数就是子组件传递出来的数据parentSay(msg){console.log(msg) // hello, parent}},// 引入子组件components:{children: Children}}</script>

子组件

<template><div class="hello"><div class="children" @click="say">我是子组件<div>父组件对我说：{{msg}}</div></div></div></template><script>export default {//父组件通过props属性传递进来的数据props: {msg: {type: String,default: () => {return ''}}},data () {return {childrenSay: 'hello, parent'}},methods: {// 子组件通过emit方法触发父组件中定义好的函数，从而将子组件中的数据传递给父组件say(){this.$emit('say' , this.childrenSay);}}}</script>

子组件使用$emit方法调用父组件的方法，达到子通信父的目的。

父通信子

父组件

<!--Html--><template><!--父组件触发click方法--><div class="parent" @click="say">我是父组件<!--通过ref标记子组件--><children ref="child"></children></div></template><script>import Children from './children.vue'export default {data () {return {msg: "hello,my son"}},methods: {// 通过$refs调用子组件的parentSay方法say(){this.$refs.child.parentSay(this.msg);}},// 引入子组件components:{children: Children}}</script>

子组件

<template><div class="hello"><div class="children" >我是子组件<div>父组件对我说：{{msg}}</div></div></div></template><script>export default {data () {return {msg: ''}},methods: {// 父组件调用的JavaScript方法parentSayparentSay(msg){this.msg = msg;}}}</script>

父组件通过 $refs 调用子组件的方法。

以上就是父子组件通信的方式，父子组件传递数据直接用props，或者使用 $emit 和 $refs 依靠事件来传递数据。

父子组件通信提升篇

上文中，子通信父是在 子中触发点击事件 然后调用父组件的方法，父通信子是在 父中触发点击事件 调用子组件的方法。但是实际情况中可能存在 子通信父时子组件不允许有点击事件 而事件在父中或者 父通信子时点击事件在子组件 中。