<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
???//父亲调用子组件的方法，子组件暴露一些方法让父组件调用
???// ref如果写在dom上，表示获取dom，如果写在组件上，表示当前组件的实例
???let vm=new Vue({
???????el:"#app",
???????template:‘<child ref="c"></child>‘,
???????//一定要放在mounted下面，因为mounted方法表示数据和视图渲染完成，
???????mounted(){
???????????//当前的ref指向的是child组件的实例，通过实例调用下面的fn方法
???????????this.$refs.c.fn();
???????},
???????components:{
???????????child:{
???????????????template:‘<div>child</div>‘,
???????????????methods:{
???????????????????fn(){
???????????????????????alert("子子")
???????????????????}
???????????????}
???????????}
???????}
???})
</script>
</html>
vue.js组件之间通讯--父组件调用子组件的一些方法，子组件暴露一些方法，让父组件调用
原文地址：http://www.cnblogs.com/null11/p/7479189.html