效果1如下：
QQ图片20180921144246.png
代码1如下：
<body>
<div id='app'>
<my-father></my-father>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component("my-father",{
template:`
<div>
<h1>我是父组件</h1>
<p>子组件传过来的数据:<b>{{mess}}</b></p>
<my-child @send='rcvMsg'></my-child>
</div>
`,
data:function(){
return{
mess:''
}
},
methods:{
rcvMsg:function(txt){
this.mess=txt
}
}
})
Vue.component('my-child',{
template:`
<div>
<h1>我是子组件</h1>
<input type='text' v-model='msg'><button @click='sendMsg'>发送</button>
</div>
`,
data:function(){
return{
msg:''
}
},
methods:{
sendMsg:function(){
this.$emit('send',this.msg)
}
}
})
new Vue({
el:'#app'
})
</script>
效果2如下：
QQ图片20180921144455.png
代码2如下：
<body>
<div id="app">
<my-father></my-father>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component("my-father",{
template:`
<div>
<h1>{{mess}}</h1>
<my-child @send='rcvMsg'></my-child>
</div>
`,
data:function(){
return{
mess:''
}
},
methods:{
rcvMsg:function(txt){
this.mess=txt
}
}
})
Vue.component('my-child',{
template:`
<button @click='sendToFather'>传给父元素</button>
`,
data:function(){
return{
msg:'我是子组件中的数据，要给父组件传值'
}
},
methods:{
sendToFather:function(){
this.$emit('send',this.msg)
}
}
})
new Vue({
el:'#app'
})
</script>
效果3如下：
QQ图片20180921144837.png
代码3如下：
<div id='app'>
<my-component></my-component>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component('my-component',{
template:`
<div>
<h1>我是父组件</h1>
<my-child v-bind:megg='msg' @send='rcvMsg'></my-child>
<b>{{number}}</b>
</div>
`,
data:function(){
return{
msg:'hello vue',
number:''
}
},
methods:{
rcvMsg:function(txt){
this.number=txt
}
}
})
Vue.component('my-child',{
props:['magg'],
template:`
<div>
<h2>我是子元素</h2>
<a hred='#'>{{magg}}</a>
<button @click='sendFather'>发送给父组件</button>
</div>
`,
data:function(){
return{
num:5
}
},
methods:{
sendFather:function(){
this.$emit('send',this.num)
}
}
})
new Vue({
el:'#app'
})
</script>
网友评论