常常我们需要组件的拆分,就涉及到父子调用的关系,那么父组件如何调用子组件的属性和方法呢?
子组件child
{ {msg}}
export default {
data () {
return {
msg: ''
}
},
methods: {
fn () {
this.msg = ''
}
}
}
父组件parent
import child from './child'
export default {
components: {
child
},
methods: {
handleClick () {
this.$refs.child.fn() // 调用子组件的方法
console.log(this.$refs.child.msg) // 获取子组件的属性
}
}
}
总结:父组件是通过refs去引用组组件,可以得到子组件的所以属性和方法。
【vue】父组件主动调用子组件 /// 非父子组件传值
一 父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如:
React Hooks中父组件中调用子组件方法