<!DOCTYPE html>
<html>
<head>
<title>父子组件</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="box">
<my-aaa></my-aaa>
</div>
<template id="aaa">
<span>我是父级--》{{msg}}</span>
<bbb @child-msg="get" :mm="msg2"></bbb>
</template>
<template id="bbb">
<h3>子组件--》{{mm}}</h3>
<input type="button" value="send" @click="send" />
</template>
<script type="text/javascript">
var vm=new Vue({
el:"#box",
data:{
},
components:{
'my-aaa':{
data(){
return {
msg:111,
msg2:'我是父组件的数据'
}
},
template:"#aaa",
methods:{
get(msg){
this.msg=msg
}
},
components:{
'bbb':{
props:['mm'],
data(){
return {
a:'我是子组件的数据'
}
},
template:"#bbb",
methods:{
send(){
this.$emit("child-msg",this.a)
}
}
}
}
}
}
})
</script>
</body>
</html>
扫一扫
819
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
