码迷,mamicode.com
首页 > Web开发 > 详细

vue.js组件之间通讯--父组件调用子组件的一些方法,子组件暴露一些方法,让父组件调用

时间:2017-09-05 16:53:25      阅读:314      评论:0      收藏:0      [点我收藏+]

标签:module   child   body   type   his   bsp   vue.js   数据   methods   


<!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组件之间通讯--父组件调用子组件的一些方法,子组件暴露一些方法,让父组件调用

标签:module   child   body   type   his   bsp   vue.js   数据   methods   

原文地址:http://www.cnblogs.com/null11/p/7479189.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!