Vue ref

Vue的ref和$refs

ref-----String

ref用来给DOM元素和子组件注册引用信息，这些引用信息将存放在在父组件的$refs对象上。如果是在一个DOM元素注册，则是引用DOM元素，即获得DOM元素。如果是在一个子组件注册，则是引用组件实例，即可以利用这点来获取子组件的数据对象或者是调用子组件的方法。

$refs-------Object

存有注册ref的子组件

1. 因为首先要有元素或者组件才有ref，所以在渲染之前是取不到ref的，只有在渲染之后才取到。
2. 可以利用this.$refs.name取得实例，那就可以调用方法和取得数据对象
3. 如果是v-for和ref一起使用的话，获得的是一个数组
   具体查看

 created: function () {
                console.log(this.$refs.into); underfined
            }
 mounted: function () {
                // console.log(this.$refs.into);  <div>我是入口组件</div>
                console.log(this.$refs.son);   son实例

            }

    Vue.component('son', {
        template: `<div>
        <div ref='da'>我是儿子</div>
        <button @click='input2'>用来触发父组件方法</button>
        <button @click='input'>在组件声明的地方使用ref</button>
        </div>`,
        data: function () {
            return {
                msg: '黄丹妮最美'
            }
        },
        methods: {
            /*在子组件使用this.$refs也可以*/
            input() {
                console.log(this.$refs.da);
            },
            /*父组件调用子组件的方法*/
            input1() {
                alert('被调用了');
            },
            /*子组件调用父亲方法*/
            input2() {
                this.$emit('Father');
            }
        }
    })



    /*ref的用法*/
    var APP = {
        template: `<div>
        <div ref='into'>我是入口组件</div>
        <son ref='son' @Father='input4' />
        <button @click='input2'>我想调用子组件的方法</button>
        <button @click='input3'>我想打印子组件中的data</button>
        </div>`,
        data: function () {
            return {

            }
        },
        /*created: function () {
            console.log(this.$refs.into);
        }*/
        mounted: function () {
            // console.log(this.$refs.into);  <div>我是入口组件</div>
            console.log(this.$refs.son);  // son实例

        },
        methods: {
            /*调用子组件的方法*/
            input2() {
                this.$refs.son.input1();
            },
            /*取得子组件的数据对象*/
            input3() {
                console.log(this.$refs.son.msg);
            },
            /*父组件被调用后触发的方法*/
            input4() {
                console.log('黄丹妮最可爱');
            }
        }
    }

    new Vue({
        el: '#app',
        template: '<APP />',
        data: function () {
            return {

            }
        },
        components: {
            APP
        }
    })