首页 > 编程知识 正文

vue子组件调用父组件函数,vue中父组件如何获取子组件的属性和方法

时间:2023-05-04 20:16:30 阅读:196197 作者:3656

父组件通过 props 向下传递数据给子组件,子组件通过 $emit触发events 给父组件发送消息。

尽管存在 props 和事件,有的时候你仍可能需要在 JavaScript 里直接访问一个子组件,这就需要使用ref特性,通过 ref 特性为这个子组件赋予一个 ID 引用。

ref:用来给元素或子组件注册引用信息,引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用,那么指向的就是普通的DOM元素。

ref的3种使用场景:

ref 加在普通的元素上,用this.$refs.name 获取到的是dom元素。ref 加在子组件上,在父组件中用this.$refs.name 获取到的是组件实例,可以调用组件的所有属性和方法。ref和v-for一起使用,用this.$refs.name获取到的将会是一个包含了对应数据源的这些子组件或者DOM元素的数组。

1. ref 加在普通的元素上。

<div id="app"> <input ref="input"> <button @click="get">获取input这个DOM元素</button></div>var app=new Vue({ el:"#app", data:{ }, methods:{ get:function(){ console.log(this.$refs.input); } }})

2. ref 加在子组件上,在父组件中引用。

<div id="app"> <child-component ref="child"></child-component> <button @click="get">获取子组件</button></div>Vue.component('childComponent',{ template:"<div>我是子组件</div>" })var app=new Vue({ el:"#app", data:{ }, methods:{ get:function(){ console.log(this.$refs.child); } }})

总结:

父组件调用子组件或DOM元素的属性和方法:

this.$refs.refName.属性this.$refs.refName.方法

子组件或DOM元素调用父组件的属性或方法:

this.$parent.属性this.$parent.方法

 

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。