vue父子组件通信

[chenyinkai]

vue 父子组件通信

父 -> 子的数据传递

使用 Props 传递数据

父组件

<template>
  <div class="parent">
    <son :number="num"></son>
  </div>
</template>

<script>
import son from './children/son'

export default {
  name: 'parent',
  data () {
    return {
      num: 1
    }
  },
  components:{
    son
  }
}
</script>

子组件

<template>
  <div class="son">
    {{number}}
  </div>
</template>

<script>
export default {
  name: 'son',
  props:{
    number:Number
  }
}
</script>

子组件显示 0

动态 Props

修改父组件

<template>
  <div class="parent">
    <son :number="num"></son>
  </div>
</template>

<script>
import son from './children/son'

export default {
  name: 'parent',
  data () {
    return {
      num: 1
    }
  },
  mounted () {
    setTimeout(() => {
      this.num = 99;
    }, 3000);
  },
  components:{
    son
  }
}
</script>

子组件先显示 0, 3 秒后显示 99

子 -> 父的数据传递

自定义事件

父组件

<template>
  <div class="parent">
    <son :number="num" @reset="resetNum"></son>
  </div>
</template>

<script>
import son from './children/son'

export default {
  name: 'parent',
  data () {
    return {
      num: 0
    }
  },
  mounted () {
    setTimeout(() => {
      this.num = 99;
    }, 3000);
  },
  methods: {
    resetNum (data) {
      this.num = data;
    }
  },
  components:{
    son
  }
}
</script>

子组件

<template>
  <div class="son">
    {{number}}
    <button @click="reset">reset</button>
  </div>
</template>

<script>
export default {
  name: 'son',
  props:{
    number:Number
  },
  methods: {
    reset () {
      this.$emit('reset', 0)
    }
  }
}
</script>

此时, 子组件初始显示 0, 3 秒后显示 99, 点击 reset 重新显示 0

.sync 修饰符

实现双向数据绑定的语法糖

父组件

<template>
  <div class="parent">
    <son :number.sync="num"></son>
  </div>
</template>

<script>
import son from './children/son'

export default {
  name: 'parent',
  data () {
    return {
      num: 0
    }
  },
  mounted () {
    setTimeout(() => {
      this.num = 99;
    }, 3000);
  },
  components:{
    son
  }
}
</script>

子组件

<template>
  <div class="son">
    {{number}}
    <button @click="reset">reset</button>
  </div>
</template>

<script>
export default {
  name: 'son',
  props:{
    number:Number
  },
  methods: {
    reset () {
      this.$emit('update:number', 0)
    }
  }
}
</script>

https://cn.vuejs.org/v2/guide/components.html#Prop