1.尽管存在 prop 和事件,有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的,你可以通过 ref
这个 attribute 为子组件赋予一个 ID 引用。使用时在父组件直接 this.this.$refs.idName 就可以获取到子组件实例。
2.当 ref
和 v-for
一起使用的时候,你得到的 ref 将会是一个包含了对应数据源的这些子组件的数组。
3.$refs
只会在组件渲染完成之后生效,并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs
。
举个栗子:
父组件中
<template>
<div id="app">
<div @click="hander">按钮</div>
<Child ref="child" msg="父组件向子组件传值"></Child>
</div>
</template>
<script>
import Child from '@/components/Child.vue'
export default {
name: 'app',
components: {
Child
},
methods:{
hander(){
this.$refs.child.test();
}
}
}
</script>
子组件中
<template>
<div>
{{msg}}
</div>
</template>
<script>
export default {
name: 'Child',
props: {
msg: {
type: String
}
},
methods: {
test() {
console.log("子组件方法");
}
}
};
</script>
点击“按钮”文字会执行子组件中的test方法,输出“子组件方法”