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