一、ref属性
1.被用来给元素或子组件注册引用信息(起别名);
2.应用在html标签上获取的是真实的DOM元素,应用在组件标签上是组件实例对象;
3.使用方式:<input type="text" ref="stuName"> let name = this.$refs.stuName.value
ref 和 refs 的关系
this.$refs
返回了一个对象,包含当前页面的所有ref
引用名称ref
用于定义引用名称
例子:
<div>
<label>
姓名:<input type="text" ref="stuName">
</label>
<br><br>
<button @click="getName">获取姓名</button>
</div>
export default {
methods:{
getName(){
//原生写法:
// let name = document.getElementById('uname').value
// console.log('姓名:',name);
//vue中的方法
let name = this.$refs.stuName.value
console.log('姓名:',name);
}
}
}
二、$parent和$children
this.$parent 可以直接访问该组件的父组件; 3、父组件也可以通过this.$children 访问它所有的子组件;
1.$children组件属性
当前实例的直接子组件。需要注意 $children 并不保证顺序,也不是响应式的。
即$children是组件自带的属性,它可以获取到当前组件的子组件,并以数组的形式返回。
2.$parent
指定已创建的组件的父组件,在两者之间建立父子关系。子组件可以用 this.$parent 访问父组件,子组件被放入父组件的 $children 数组中。
如果组件没有父组件,他的$parent为undefined,App组件(根组件)的$parent不是undefined,也不是App本身。
- 组件本身没有父组件和子组件,而是在运行时,每个组件实例的位置,决定其父组件和子组件
- 每个组件实例有且只有一个父组件(顶级组件实例没有哈)
- 但每个组件实例可能没有子组件,可能有一个,也可能有多个,所以一般
children
是数组,没有的时候是空数组