vue中子组件向父组件传值

1.子组件$emit()触发,父组件$on()监听

子组件:
<template> <div class="hello"> <button v-on:click="onClickMe">telltofather</button> </div> </template> <script> export default { methods: { onClickMe () { this.$emit('childClick',this.msg);//将this.msg传给父组件 } } } </script>

父组件:

<template>
    <div id="app">
    <p>child tell me: {{childWords}}</p>
    <child v-on:childClick='listenToMyBoy'>            
    </child>
</div>
</template   >

<script>

import child from './components/child';
export default {
  components: {
    child
  },
  data () {
    return {
      childWords: ''
    }
  },
  methods: {
    listenToMyBoy (msg) {
      this.childWords = msg;//获取到子组件传过来的值msg
    }
  }
}
</script>

 

posted @ 2017-12-25 21:13  无花即无果  阅读(564)  评论(0编辑  收藏  举报