Vue父子组件之间通信

父子组件

应用场景1

父组件向子组件进行通信

用法举例

Vue.component('counter', {
			// 在父组件中使用时，<counter :count='1'></counter>  通过props中声明的变量进行传值  
            props: ['count'],
            data: function() {
                return {
                    number: this.count
                }
            },
            template: '<div @click="add">{{number}}----{{count}}</div>',
            methods: {
                add: function() {
                    this.number++,
                }
            },
})

应用场景2

子组件向父组件传值

用法举例

Vue.component('counter', {
            template: '<div @click="add">点击一下</div>',
            methods: {
                add: function() {
                	// 父组件中使用<counter @inc="addnumber"></counter>,注意到当子组件触发add方法,父组会触发addnumber方法
                	// xxx是参数值，父组件可以通过方法参数获取到
                    this.$emit('inc', 'xxx')
                }
            },
})

the end

why use and how to use

标签：function,count,Vue,number,父子,add,组件
来源： https://blog.csdn.net/weixin_42228983/article/details/122259024