vue父組件如何調用子組件的屬性或方法

常常我們需要組件的拆分，就涉及到父子調用的關系，那么父組件如何調用子組件的屬性和方法呢？

子組件child

<template>
  <div>
    {{msg}}
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: ''
    }
  },
  methods: {
    fn () {
      this.msg = ''
    }
  }
}
</script>

父組件parent

<template>
  <child ref="child"></child>
</template>

<script>
import child from './child'
export default {
  components: {
    child
  },
  methods: {
    handleClick () {
      this.$refs.child.fn() // 調用子組件的方法
      console.log(this.$refs.child.msg) // 獲取子組件的屬性
    }
  }
}
</script>

總結：父組件是通過refs去引用組組件，可以得到子組件的所以屬性和方法。