vue实战-vue父子组件通信方式汇总

ゞ浴缸里的玫瑰 2022-02-22 10:38 249阅读 0赞

> **小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大佬公司都在使用。**

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

*  子通信父

<template>
      <div class="parent">
        我是父组件
        
        
        <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方法调用父组件的方法，达到子通信父的目的。

*  父通信子

<template>
       
      <div class="parent" @click="say">
        我是父组件
        
        <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`依靠事件来传递数据。  
**您的关注是我最大的动力**

作者：晓月寒丶  
链接：https://www.jianshu.com/p/d554ce4de65b  
来源：简书  
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

[Fundebug]: https://www.fundebug.com/