vue中父子组件之间的通信

1. 父组件向子组件传值

父组件向子组件传值，通过props传递

parent.vue：父组件向子组件传递一个a值，子组件通过props接受

<template lang="html">
  <div class="">
    <h1>这是父组件</h1>
    <children  :a='a'></children>
  </div>
</template>

<script>
import children from '@/components/children'
export default {
  components: {
    'children':children
  },
  data () {
    return {
      a : 1
    }
  }
}
</script>

<style lang="css">
</style>

children.vue: 子组件通过props接受a值，在和h2中显示 1。

<template lang="html">
  <div class="">
    <h1>这是子组件</h1>
    <h2>{{a}}</h2>
  </div>
</template>

<script>
export default {
  name: 'children',
  props: ['a'],
  data () {

  }
}
</script>

<style lang="css">
</style>

2. 子组件向父组件传值，并更改父组件传过来的值，通过this.$emit方法

在父组件中引子组件，并且子组件上绑定一个change事件，这个事件接收子组件传递的值。 parent.vue

<template lang="html">
  <div class="">
    <h1>这是父组件</h1>
    <h2>{{a}}</h2>
    <button @click='less'> - </button>
    <children @change='changeValue' :a='a'></children>
  </div>
</template>

<script>
import children from '@/components/children'
export default {
  components: {
    'children':children
  },
  data () {
    return {
      a : 1
    }
  },
  methods: {
    changeValue(value) {
      this.a = value
    },
    less() {
      this.a --
    }
  }
}
</script>

<style lang="css">
</style>

在子组件中，通过props接收父组件传递的值，并且通过this.$emit方法向父组件传递值。

children.vue

<template lang="html">
  <div class="">
    <h1>这是子组件</h1>
    <h2>{{a}}</h2>
    <button @click='addChild'>+</button>
  </div>
</template>

<script>
export default {
  name: 'children',
  props: ['a'],
  data () {
    return {
      b : 0
    }
  },
  methods: {
    addChild() {
      this.b = this.a
      this.b ++
      this.$emit('change',this.b)
    }
  }
}
</script>

<style lang="css">
</style>

在子组件中，将父组件传递的a的值重新赋值给一个新的变量b,然后去更改b的值，通过this.$emit('change',this.b)传递给父组件，这里的change事件是在父组件中定义的。