Vue父子组件（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方法parentSay parentSay(msg){ this.msg = msg; } } } </script>

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