使用$on()监听事件；
使用$emit()在它上面触发事件；
使用$dispatch()派发事件，事件沿着父链冒泡；
使用$broadcast()广播事件，事件向下传导给所有的后代
vue2.0后$dispatch()，$broadcast()被弃用，见https://cn.vuejs.org/v2/guide/migration.html#dispatch-和-broadcast-替换
1.子组件向父组件的传值：
child.vue
d477f9ce7bf77f53fbcf36bec1b69b7a 256623bcd80aa3c91f9a846bd694f708 4a249f0d628e2318394fd9b75b4636b1子组件473f0a7621bec819994bb5020d29372a bbaeb6b073f547e8b824f32b1f1ffbf6想父组件传值65281c5ac262bf6d81768915a4a77ac0 94b3e26ee717c64999d7867364b1b4a3 21c97d3a051048b8e55e3c8f199a54b2 3f1c4e4b6b16bbbd69b2ee476dc4f83a export default{ name: 'child', data(){ return {} }, methods: { childtoparent(){ this.$emit(childtoparentmsg, 子组件向父组件传值); } } } 2cacc6d41bbb37262a98f745aa00fbf0parent.vue
d477f9ce7bf77f53fbcf36bec1b69b7a 2f947c059f95c7b6013fe75febf72946 4a249f0d628e2318394fd9b75b4636b1父组件473f0a7621bec819994bb5020d29372a 9ad0f83789eb9175ed21edf64f1ad1533d6d58e436a0f6815a0e7fde69d49427 94b3e26ee717c64999d7867364b1b4a3 21c97d3a051048b8e55e3c8f199a54b2 3f1c4e4b6b16bbbd69b2ee476dc4f83a import child from './child/child.vue' export default{ name:parent, data(){ return { } }, methods: { showchildtoparentmsg:function(data){ alert(父组件显示信息：+data) } }, components: {child} } 2cacc6d41bbb37262a98f745aa00fbf0
2.父组件向子组件传值
parent.vue
d477f9ce7bf77f53fbcf36bec1b69b7a 2f947c059f95c7b6013fe75febf72946 4a249f0d628e2318394fd9b75b4636b1父组件473f0a7621bec819994bb5020d29372a da17ececa97e8bfc58a962a95aaaf7883d6d58e436a0f6815a0e7fde69d49427 94b3e26ee717c64999d7867364b1b4a3 21c97d3a051048b8e55e3c8f199a54b2 3f1c4e4b6b16bbbd69b2ee476dc4f83a import child from './child/child.vue' export default{ name:parent, data(){ return { parentmsg:'父组件向子组件传值' } }, components: {child} } 2cacc6d41bbb37262a98f745aa00fbf0
child.vue
d477f9ce7bf77f53fbcf36bec1b69b7a 256623bcd80aa3c91f9a846bd694f708 4a249f0d628e2318394fd9b75b4636b1子组件473f0a7621bec819994bb5020d29372a 45a2772a6b6107b401db3c9b82c049c2子组件显示信息：{{parenttochild}}54bdf357c58b8a65c66d7c19c8e4d1140c6dc11e160d3b678d68754cc175188a 94b3e26ee717c64999d7867364b1b4a3 21c97d3a051048b8e55e3c8f199a54b2 3f1c4e4b6b16bbbd69b2ee476dc4f83a export default{ name: 'child', data(){ return {} }, props:[parenttochild] } 2cacc6d41bbb37262a98f745aa00fbf0
3.采用eventbus.js传值---兄弟组件间的传值
eventbus.js
import vue from 'vue' export default new vue()
app.vue
<template> <p id="app"> <secondchild></secondchild> <firstchild></firstchild> </p> </template> <script> import firstchild from './components/firstchild' import secondchild from './components/secondchild' export default { name: 'app', components: { firstchild, secondchild, } } </script>
firstchild.vue
<template> <p class="firstchild"> <input type="text" placeholder="请输入文字" v-model="message"> <button @click="showmessage">向组件传值</button> <br> <span>{{message}}</span> </p> </template> <script> import bus from '../assets/eventbus'; export default{ name: 'firstchild', data () { return { message: '你好' } }, methods: { showmessage () { alert(this.message) bus.$emit('userdefinedevent', this.message);//传值 } } } </script>
secondchild.vue
<template> <p id="secondchild"> <h1>{{message}}</h1> </p> </template> <script> import bus from '../assets/eventbus'; export default{ name:'secondchild', data(){ return { message: '' } }, mounted(){ var self = this; bus.$on('userdefinedevent',function(message){ self.message = message;//接值 }); } }
以上就是vue2.0组件的传值问题的详细内容。