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去引用组组件，可以得到子组件的所以属性和方法。