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依靠事件来传递数据。

父子组件通讯提高篇

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

子通讯父时击事件在父组件

这种状况其实很常见，例如提交一个表单时表单的内容为子组件，而保存按钮在父组件上。此时点击保存按钮想要获取子组件表单的值。这种状况下已经不仅仅是子通讯父和父通讯子了，须要将二者结合在一块儿使用才能完成整个通讯过程。

实现的思路是在父组件中点击事件时，先经过父子通讯调用子组件的方法，而后在子组件中的该方法里使用子父通讯调用父组件的另外一个方法并将信息传递回来。如下是代码演示：

父组件

<template>
  <div class="parent" @click="getData">
    我是父组件
    <!--父组件监听子组件触发的transData方法，调用本身的transData方法-->
    <!--经过ref标记子组件-->
    <children ref="child" @transData="transData"></children>
  </div>
</template>

<script>
import Children from './children.vue'
export default {
  data () {
    return {
      msg: 'hello, children'
    }
  },
  methods: {
      getData(){
          // 调用子组件的getData方法
          this.$refs.child.getData();
      },
      // 参数就是子组件传递出来的数据
      transData(msg){
          console.log(msg) // hello, parent
      }
  },

  // 引入子组件
  components:{
      children: Children
  }
}
</script>

子组件

<template>
  <div class="hello">
    <div class="children" >
      我是子组件
      <div>
        子组件的数据：{{childrenSay}}
      </div>
    </div>

  </div>
</template>

<script>

  export default {
      data () {
        return {
            childrenSay: 'hello, parent'
        }
      },
      methods: {
          // 子组件经过emit方法触发父组件中定义好的函数，从而将子组件中的数据传递给父组件
          getData() {
              this.$emit('transData' , this.childrenSay);
          }
      }
  }
</script>

另外一种状况思路也和这个同样，基础就在与父通讯子和子通讯父的灵活运用。
转评赞就是最大的鼓励