vue组件间通信方式

一、父子组件通信

<template>
    // 父组件
    <div>
        // 子组件
        <children @search="search" :message.sync="message"></children>
    </div>
</template>
<script>
    import children from "path";
    export default {
        data() {
            return {
                message: "hello children component"
            }
        },
        methods: {
            search(e) {
                // 方法体
                console.log(e); // this event from children
            }
        }
    }
</script>

<template>
    // 子组件
    <div>
        <text>{{ message }}</text>
        <button @click.stop="search">搜索</button>
    </div>
</template>
<script>
    export default {
        props: {
            message: {
                type: String,
                default: ""
            }
        },
        data() {
            return {
                info: "this event from children"
            }
        },
        methods: {
            search() {
                // 向父组件通信
                this.$emit("search",this.info);
                // 修改父组件传过来的参数
                this.$emit("update:message","change from children");
            }
        }
    }
</script>

一般来说，父组件向子组件传参，子组件不能直接修改此参数，若要修改此参数，在父组件传参时需要在参数名后加.sync修饰符，然后在子组件的方法中用this.$emit("update:参数名","目标修改内容")来修改此参数。

如果父组件要使用子组件的方法，可以使用一下方式

<template>
    // 子组件
    <div>
        <text>{{ message }}</text>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                message: '我是子组件',
                info: "this event from children"
            }
        },
        methods: {
            search() {
                // 这是子组件的方法
                console.log(this.info, '这是子组件中的info信息');
            }
        }
    }
</script>

<template>
    // 父组件
    <div>
        <button @click="getChildren" />
        <Children ref="children" />
    </div>
</template>
<script>
    import Children from './common/Children';
    export default {
        components: { Children },
        data() {
            return {
                
            }
        },
        methods: {
            getChildren() {
                // 这是子组件的方法
                this.refs.children.search();
                // this event from children, 这是子组件中的info信息
            }
        }
    }
</script>