常常我们需要组件的拆分,就涉及到父子调用的关系,那么父组件如何调用子组件的属性和方法呢?

子组件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中父组件中调用子组件方法

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信