一、父子元件通訊

<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:引數名","目標修改內容")來修改此引數。