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>
每一份努力都不会白费。