最简单的子传父组件
子传父 用事件传，这个事件是自定义事件 用$emit("事件"，参数)来表示
<div id="app">
<my-father></my-father>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component("my-father",{
template:`
<div>
<h1>我是父组件</h1>
<span>这里是内容:</span>
<a href="#">{{msgg}}</a>
<my-child @send="fun2"></my-child>
//绑定了子组件中的send事件，并将fun2的内容赋给send，点击将触发
</div>
`,
data:function(){ //定义一个假的数据，在下面赋值用
return{
msgg:""
}
},
methods:{
fun2:function(tex){ //形参
this.msgg=tex
}
}
})
Vue.component("my-child",{
template:`
<div>
<h1>我是子组件</h1>
<input type="text" v-model="msg">
<button @click="fun">添加进去</button>
</div>
`,
data:function(){
return{
msg:""
}
},
methods:{
fun:function(){
this.$emit("send",this.msg); //这里的this.msg当成实参传给上面的形参
this.msg=""
}
}
})
new Vue({
el:"#app"
})
</script>
QQ截图20180921190754.png
