ref属性

定义：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

作用：简单说就是给子组件上绑定ref，则父组件就可以通过this.$ref.子组件绑定的ref的值获取到子组件的实例

this.$ref结构：默认是空对象，当在子组件上绑定ref属性时，this.$refs的结构就变成{ 绑定的ref属性: 对应的子组件 }

注意点：ref属性和this$ref是两码事儿，话不多说，上代码

1. 通过ref直接访问dom元素

// 示例1：ref访问dom元素
<body>
    <div id="app">
       // 给p元素绑定ref属性，则父组件vm实例可以通过vm.$ref.pref引用到p元素进而操作p元素
        <p ref="pref" attr="ppp">我是p元素</p>
        <div>
            {{ getElement() }}
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            methods: {
                getElement() {
                    // this.$refs.pref指向p元素
                    // vm.$refs.pref.getAttribute('attr')可以获取到p元素上的attr属性值
                    return this.$refs.pref
                }
            }

        })
    </script>
</body>

2. 通过ref直接访问子组件实例

// 示例1：通过ref访问子组件实例
<div id="app">
  <cpn ref="cpnRef"></cpn>
  <button @click="getcpn">btn</button>
  <p>{{ msg }}</p>
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data() {
      return {
        msg: ''
      }
    },
    components: {
      cpn: {
        template: '<div>我是cpn组件</div>',
        data() {
          return {
            cpnMsg: "我是cpn组件的cpnMsg"
          }
        }
      }
    },
    methods: {
      getcpn() {
        // this.$refs.cpnRef指向cpn组件实例；可以简单调用cpn组件的属性或者方法
        // this.$refs.cpnRef.cpnMsg 获取到cpn子组件的属性值
        this.msg = this.$refs.cpnRef.cpnMsg
      }
    }

  })
</script>

3. $ref.xxx 和 $ref.xxx.$el区别

如果$ref.xxx指向的是原生dom元素，则$ref.xxx可以直接操作原生dom属性如果$ref.xxx指向的是组件实例，此时操作原生dom需要通过$ref.xxx.$el可以直接操作原生dom属性

vue的ref属性

ref属性

1. 通过ref直接访问dom元素

2. 通过ref直接访问子组件实例

3. $ref.xxx 和 $ref.xxx.$el区别