方法一(推荐)
父组件传值给子组件:在父组件中通过自定义属性的方式,将数据传递给子组件,然后在子组件中使用“props”选项接收来自父组件的数据。
子组件传值给父组件:在子组件中使用“vm.$emit”触发事件并携带附加参数,而在父组件中监听指定事件,执行的回调函数中可以获取所有附加参数。另外普通的元素上使用“v-on”指令只能监听原生 DOM 事件,但是在自定义组件上也可以用来监听子组件触发的事件。
示例:
父组件传值给子组件:
// 在父组件中自定义属性 Vue.component('parent',{ template: '<div class="parent"><children someProps="hello"></children></div>' }); // 在子组件中接收 Vue.component('children',{ template: '<div class="children"></div>', props: ['someProps'], mounted: function() { console.log(this.someProps); // 输出hello } });
子组件传值给父组件:
// 在父组件中监听事件 Vue.component('parent',{ template: '<div class="parent"><children @someEvents="doSomething"></children></div>', methods: { doSomething: function(params) { console.log(params); // 输出hello } } }); // 在子组件中触发事件 Vue.component('children',{ template: '<div class="children"></div>', mounted: function() { this.$emit('someEvents','hello'); } });
方法二
父组件传值给子组件:在子组件中可以通过“vm.$parent”访问父组件实例,从而获取到父组件的数据或调用父组件的方法。
子组件传值给父组件:通过给子组件添加“ref”属性注册引用信息,然后在父组件中使用"vm.$refs"访问指定引用信息的子组件实例。
示例:
父组件传值给子组件:
Vue.component('parent',{ template: '<div class="parent"><children></children></div>', data: function() { return { message: 'hello' }; } }); // 在子组件中访问父组件实例 Vue.component('children',{ template: '<div class="children"></div>', mounted: function() { console.log(this.$parent.message); // hello } });
子组件传值给父组件:
// 在父组件中访问子组件实例 Vue.component('parent',{ template: '<div class="parent"><children ref="childrenOne"></children></div>', mounted: function() { console.log(this.$refs.childrenOne.message); // hello } }); Vue.component('children',{ template: '<div class="children"></div>', data: function() { return { message: 'hello' }; } });
方法三
在所有组件中都可以使用"vm.$root"来访问根实例,因此在小型或只有少量组件的应用中,可以作为全局 store 用来管理数据状态。这种方法不但可以用作父子之间传参,也可以用作兄弟组件之间传参。
示例一:
Vue.component('parent',{ template: '<div class="parent"><children></children></div>', created: function() { this.$root.message = 'hello'; } }); Vue.component('children',{ template: '<div class="children"></div>', created: function() { console.log(this.$root.message); // hello } });
示例二:
Vue.component('parent',{ template: '<div class="parent"><children></children></div>', created: function() { this.$root.$on('someEvents',function(params) { console.log(params); // hello }); } }); Vue.component('children',{ template: '<div class="children"></div>', created: function() { this.$root.$emit('someEvents','hello'); } });
方法四
对于复杂的大中型单页应用,多个组件共享状态时,传统的单向数据流传参的模式会变得非常繁琐,导致代码无法维护,此时可以使用 Vuex 将组件的共享状态抽离出来作为一个全局单例模式管理。