常常我们需要组件的拆分，就涉及到父子调用的关系，那么父组件如何调用子组件的属性和方法呢？
子组件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去引用组组件，可以得到子组件的所以属性和方法。