$refs
作用
获取对应组件实例,如果是原生dom,那么直接获取的是该dom。获取之后我们可以使用它的属性和方法。
使用方法:
// 在我们需要获取实例的地方定义ref
<my-component ref="myRef"></my-component>
// 然后我们在js中通过$refs方式获取该实例
this.$refs.myRef
$parent
使用范围:
该属性只针对vue组件,与js中parentNode还是有区别的。
$parent: 获取父组件实例。
$parent: 获取父节点。
作用:
获取父组件实例,同样,获取之后我们可以使用它的属性和方法。
使用方法:
// 父组件中
<template>
<my-component></my-component>
</template>
<script>
export default{
data(){
return{
num: ''
}
}
}
</script>
// 子组件中
<template>
<div>我是子组件</div>
<el-button @click="getParent"></el-button>
</template>
<script>
export default{
data(){},
methods:{
getParent(){
// 通过$parent我们可以获取父组件实例,并将他的属性num改为1
this.$parent.num = 1
}
}
}
</script>
如果子组件是公共组件,会被多个父组件调用,那么$parent会怎么获取?改变他们的属性将会怎么变化?父组件中没有这个属性怎么办?
- 针对不同父组件调用,子组件会每次都会生成一个实例,这也是Vue的重要机制。$parent会获取每个调用它的父组件实例。
- 子组件中通过$parent会改变每个调用它的父组件中的对应属性。
$children
使用范围:
该属性只针对vue组件,与js中childNodes还是有区别的。
$children: 获取子组件实例集合。
childNodes: 获取子节点集合。
作用:获取父组件下的所有子组件实例,返回的是一个数组。
使用方法:
// 父组件中
<template>
<A></A>
<B></B>
</template>
<script>
export default{
data(){},
mounted(){
// 通过$children可以获取到A和B两个子组件的实例
console.log('children:',this.$children)
}
}
</script>
其中,
this.$children[0]
可以获取到A组件的实例,一样的,我们可以使用A组件的属性以及他的方法。