首页 > 技术文章 > vue 子组件把数据传递给父组件

complete94 2017-05-16 10:51 原文

<div id="app">
     <child v-on:drop='parent'></child>   //这里v-on:drop="parent" 由于用了定义模板组件功能,然后在父组件里定义一个HTML元素绑定这个子组件后才能在父组件通过这个HTML元素使用。
</div>

<script>
  var child = {
  template:"<div v-on:click='drop'>子组件</div>",
 methods:{
  drop:function(){
   this.$emit('parent',"传递的数据给父组件");     // 当我们点击child组件的时候,他会触发drop,drop里面有$emit会触发parent事件, $emit("触发父级事件","要传递的数据")
}
}
}

new Vue({
 el:"#app",
methods:{
 parent:function(value){
 console.log(value);
 }
},
templates:{
 child
}
})
</script>

 

推荐阅读