ref属性及 $parent和$children的用法

一、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是数组，没有的时候是空数组