Vue中父组件与子组件之间传值

方法一（推荐）

父组件传值给子组件：在父组件中通过自定义属性的方式，将数据传递给子组件，然后在子组件中使用“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 将组件的共享状态抽离出来作为一个全局单例模式管理。