this.$refs用法

父组件调用子组件方法、调用组件的方法

1. 子组件中加了ref即可通过this.$refs.ref.method调用子组件的方法。
   
2. 调用组件的方法：假如这里使用了element-vue的Table组件；想要调用Table组件的默认方法getData()。

父组件代码：

<template>
 <Child ref="vchild"></Child>
 <Table ref="table"></Table>
</template>

<script>
	export default {
	    name: "Parent",
	    data () {
	        return {
	            msg: "from parent"
	        }
	    },
	    methods: {
            // 父组件调用子组件方法
	        this.$refs.vchild.childMethod(this.msg); 
            // 调用组件的方法
            this.$refs.table.getData(); 
	    }
	}
</script>

子组件代码：

<template>
    <div id="child">
        {{msg}}
    </div>
</template>

<script>
	export default {
	    name: "Child",
        // 向父组件传值
	    props: ["msg"],
	    data () {
	        return {
	            msg: ""
	        }
	    },
	    methods: {
	        childMethod (msg) {
	            this.msg = msg
	        }
	    }
	}
</script>