您的位置：首页 > 产品设计 > UI/UE

vuejs 子组件传递父组件的第一种方式

2017-01-15 20:06 253 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-dmeo</title>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="page">
<hellow v-on:child-msg="handleIt"></hellow>
{{arr|json}}
</div>
<script type="text/javascript" src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
var  handle= function(){
var hellow = {
template:"<div style='color:#f00;text-align:center;'><input type='text' v-model='mess' /><button @click='csend()'>点击</button>{{mess}}</div>",
methods:{
csend:function(){
if(this.mess.trim()){
this.$emit('child-msg',this.mess);
this.mess='';
}
}
}
}

return new Vue({
el:"#page",
data:{
arr:[],
},
methods:{
handleIt:function(msg){
this.arr.push(msg);
}
},
components:{
hellow:hellow,
}
})
}()

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航