vue的ref

$refs

尽管有props和events，但是仍然需要在JavaScript中直接访问子组件。

为此可以使用ref为子组件指定一个索引ID。

注意，ref并不是动态更新的，也就是说不应该绑定变量，而是写一个固定值即可。

在home.vue中添加list组件

    
    获取子组件

home.vue中的的方法中，可以直接访问到子组件对象

import List from '../components/list'
export default {
    components: { List },
    methods: {
        getChild() {
            // 获取子组件中的数据
            console.log(this.$refs.childList.$data.name);

            // 调用子组件中的方法
            this.$refs.childList.test1();
        }
    }
}

list.vue组件中的数据：

export default {
    data() {
        return {
            name: 'list',
            version: '1.0.0'
        }
    },
    methods: {
        test1() {
            console.log('test1');
        },
        test2() {
            console.log('test2');
        }
    }
}

子组件向父组件传值

注意：子组件同样也可以调用父组件中的方法，通过props传值即可

通过此种方法，子组件也可以传值给父组件

父组件中

子组件中