下面先详细了解$ref:
定义一个父组件:
<template>
<div class="container" ref="box">
<Child ref="child"></Child>
</div>
</template>
<script>
import Child from '@/components/child.vue'
export default {
components: {
Child
},
mounted() {
console.log("dom元素", this.$refs.box); // 拿到的是dom元素
console.log("组件实例", this.$refs.child); // 拿到的是child这个组件的实例
}
}
</script>
- 如果ref使用在元素上的,则
拿到的是该元素对象
- 如果ref使用在组件上的,则
拿到的是该组件的vue实例对象
,那就可以直接使用child组件中定义的所有属性和方法
下面通过ref获取组件的实例,然后调用子组件中定义的方法:
父组件
<div class="container" ref="box">
<el-button size="small" type="primary" @click="handleClick"
>点击触发子组件</el-button
>
<Child ref="child"></Child> <!--子组件-->
</div>
handleClick() {
this.$refs.child.init() // init是子组件中定义的方法
}
子组件
<template>
<div class="box">
<div ref="sun">我是子组件</div>
</div>
</template>
<script>
export default {
methods: {
init() {
alert('我是子组件')
}
}
}
</script>
$ref
和$el
的区别在于,$ref
拿到的是dom元素
,而$el
拿到的组件中的根元素
如果我想在父组件中获取子组件距离浏览器顶部的距离:
console.log(this.$refs.child.$el.offsetTop);
因为this.$refs.child.$el
拿到的就是子组件的根元素;
如果想要在父组件中继续获取子组件中的其他dom元素:
console.log(this.$refs.child.$refs.sun);
注:父组件中使用this.$refs.child
,就相当于子组件中的this
,可以当成this使用该组件中的所有属性和方法