子给父传（用$emit('事件',参数)）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<my-father></my-father>
</div>
<script src='js/vue.js'></script>
<script>
Vue.component("my-father",{
template:`
<div>
<my-child @send='revMsg'></my-child>
<a href="#">{{mess}}</a>
</div>
`,
data:function(){
return{
mess:''
}
},
methods:{
revMsg:function(txt){
this.mess=txt
}
}
})
Vue.component("my-child",{
template:`
<button @click='sendMsg'>按钮</button>
`,
data:function(){
return{
msg:'我是子组件中的数据，要传给父组件'
}
},
methods:{
sendMsg:function(){
// this.$emit('事件',参数)
this.$emit('send',this.msg)
}
}
})
new Vue({
el:'#app'
})
</script>
</body>
</html>
QQ拼音截图未命名.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<my-father></my-father>
</div>
<script src='js/vue.js'></script>
<script>
Vue.component('my-father',{
template:`
<div>
<h1>这是父组件</h1>
<a>子组件传来的数据为{{jie}}</a>
<my-child @app='jieshou'></my-child>
</div>
`,
data:function(){
return{
jie:''
}
},
methods:{
jieshou:function(ind){
this.jie=ind
}
}
})
Vue.component('my-child',{
template:`
<div>
<h1>这是子组件</h1>
<input type='text' v-model='str'>
<button @click="add">向父组件传递</button>
</div>
`,
data:function(){
return{
str:''
}
},
methods:{
add:function(){
this.$emit('app',this.str)
}
}
})
new Vue({
el:'#app'
})
</script>
</body>
</html>
QQ拼音截图未命名.png
