Vue子组件传递信息到父组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<aaa></aaa>
</div>
<template id="aaa">
<h3>我喜欢->{{msg}}</h3>
<bbb @msg="get"></bbb>
</template>
<template id="bbb">
<input type="button" @click="send()" value="说实话">
</template>
<script>
new Vue({
el:"#box",
components:{
aaa:{
data(){
return {
msg:"linin.cn"
}
},
methods:{
get:function(msg){
this.msg=msg
}
},
template:"#aaa",
components:{
bbb:{
template:"#bbb",
data(){
return {
name1:"you"
};
},
methods:{
send:function(){
this.$emit("msg",this.name1);
}
}
}
}
}
}
});
</script>
</body>
</html>
相关文章
