vue父子组件交互

组件之前的调用：Components

new Vue({
    data: { isShow: true },
    components: [Header, Footer]
})

vuejs组件之间的通讯

父组件向子组件中传递数据：props

//父：
<header msg='something interesting'></header>
//子：
new Vue({
    data: {
        userName: 'xxx'
    },
    //要与父组件传递过来的变量名一致
    props: ['msg'],
    methods: {
        doThis: function() {
            console.log(this.msg)
        }
    }
});

子组件向父组件传递信息：

方式一： 父$on()绑定,子$emit()向父发送信息

//父：
<template>
    <p>Child tells me: {{childWords}}</p>
    //注意，组件注册时首字母要大写，但引用时大写字母要使用'-小写字母'
    <component-a msgFormFater='youdie!' v-on:child-tell-me-something='ListenToMyBoy'></component-a>
</template>

<script>
    import ComponentA from './componentA'
    export default {
        data: function() {
            return {
                childWords: ''
            }
        },
        components: {ComponentA},
        methods: {
            ListenToMyBoy: function(msg) {
                console.log(msg);
                this.childWords = msg;
            }
        }
    }
</script>
//子componentA.vue：
    <template>
        <div class='hello'>
            <h1>{{msg}}</h1>
            <button v-on:click='onclickMe'>Click!</button>
        </div>
    </template>

    <script>
        export default {
            data: function() {
                return {
                    msg: 'hello from component a!',
                }
            },
            //子接受父的信息
            props: ['msgFormFater'],
            methods: {
                onClickMe: function() {
                    console.log(this.msgFormFater)
                    //子组件向父组件传递信息this.$emit('事件名‘, 信息)
                    this.$emit('child-tell-me-something', this.msg)
                }
            }
        }
    </script>

方式二： $dispatch()子组件向上派发事件,$broadcast()：从外往里派发事件

//父：
<template>
    <p>Child tells me: {{childWords}}</p>
    //注意，组件注册时首字母要大写，但引用时大写字母要使用'-小写字母'
    <component-a msgFormFater='youdie!' v-on:child-tell-me-something='ListenToMyBoy'></component-a>
</template>

<script>
    import ComponentA from './componentA'
    export default {
        data: function() {
            return {
                childWords: ''
            }
        },
        components: {ComponentA},
        //子组件使用$dispatch()传递消息，父组件要使用events来注册事件，并处理消息
        events: {
            'child-tell-me-something': function(msg) {
                this.childWords = msg;
            } 
        },
        methods: {
            ListenToMyBoy: function(msg) {
                console.log(msg);
                this.childWords = msg;
            }
        }
    }
</script>
//子componentA.vue：
    <template>
        <div class='hello'>
            <h1>{{msg}}</h1>
            <button v-on:click='onclickMe'>Click!</button>
        </div>
    </template>

    <script>
        export default {
            data: function() {
                return {
                    msg: 'hello from component a!',
                }
            },
            //子接受父的信息
            props: ['msgFormFater'],
            methods: {
                onClickMe: function() {
                    console.log(this.msgFormFater)
                    //子组件向父组件传递信息this.$emit('事件名‘, 信息)
                    this.$dispatch('child-tell-me-something', this.msg)
                }
            }
        }
    </script>

//父：
<template>
    <p>Child tells me: {{childWords}}</p>
    //注意，组件注册时首字母要大写，但引用时大写字母要使用'-小写字母'
    <component-a v-on:child-tell-me-something='ListenToMyBoy'></component-a>
</template>

<script>
    import ComponentA from './componentA'
    export default {
        data: function() {
            return {
                childWords: ''
            }
        },
        components: {ComponentA},
        methods: {
            addNew: function() {
                //父组件向子组件传递信息
                this.$broadcast('onAddNew', 'abc');
            }
        },
        //子组件使用$dispatch()传递消息，父组件要使用events来注册事件，并处理消息
        events: {
            'child-tell-me-something': function(msg) {
                this.childWords = msg;
            } 
        },
        methods: {
            ListenToMyBoy: function(msg) {
                console.log(msg);
                this.childWords = msg;
            }
        }
    }
</script>
//子componentA.vue：
    <template>
        <div class='hello'>
            <h1>{{msg}}</h1>
            <button v-on:click='onclickMe'>Click!</button>
        </div>
    </template>

    <script>
        export default {
            data: function() {
                return {
                    msg: 'hello from component a!',
                }
            },
            //子接受父使用$broadcast传递的信息，要在events注册事件并处理接受的数据
            events: {
                'onAddNew': function(item) {
                    console.log(item)
                }
            },
            methods: {
                onClickMe: function() {
                    console.log(this.msgFormFater)
                    //子组件向父组件传递信息this.$emit('事件名‘, 信息)
                    this.$dispatch('child-tell-me-something', this.msg)
                }
            }
        }
    </script>