Vue父子組件通訊傳值

Vue父子組件通訊傳值

父組件往子組件傳值

<body>
    <div id="App">
        <!--可以采用v-bind動(dòng)態(tài)傳值-->
        <child :txt="msg"></child>
        <!--靜態(tài)值(常量)-->
        <child txt="txt的屬性值"></child>
        <!--采用默認(rèn)值 前提是有設(shè)置-->
        <child></child>
    </div>
    <script>
        // 全局組件
        Vue.component("child",{
                template: "<p>{{txt}}</p>",
                props: {
                    txt: {
                        default: "組件自帶的默認(rèn)值"
                    }
                }
            })
            
        //props => Object || Array
        
        //組件傳值
        let app = new Vue({
                el: "#App",
                data: {
                    msg: "組件傳值"
                }
            })
    </script>
</body>

子組件與父組件通信

方式1 采用中間件作為通訊中轉(zhuǎn)站實(shí)現(xiàn)子組件往父級(jí)組件通訊傳值的功能
<body>
    <div id="App">
        <em>電話次數(shù): {{num}} </em>
        <!--可以采用v-bind動(dòng)態(tài)傳值-->
        <child :txt="msg"></child>
        <!--靜態(tài)值-->
        <child txt="txt的屬性值"></child>
        <!--采用默認(rèn)值 前提是有設(shè)置-->
        <child></child>
    </div>
    <script>

        let connectCar = new Vue();
        // 全局組件
        Vue.component("child",{
                template: "<p @click='callParent'>{{txt}}</p>",
                props: {
                    txt: {
                        default: "組件自帶的默認(rèn)值"
                    }
                },
                methods: {
                    callParent(){
                        connectCar.$emit("call","Child發(fā)來信息了");
                    }
                }
            })
        
        //組件傳值
        let app = new Vue({
                el: "#App",
                data: {
                    msg: "組件傳值",
                    num: 0
                },
                methods:{
                    callChild(){
                        connectCar.$on("call",msg => {
                            console.log(msg);
                            this.num ++;
                        })
                    }
                }
            })
        // 建立通信連接
        app.callChild();
    </script>
</body>
利用自定義事件實(shí)現(xiàn)子組件與父組件通訊
<body>
    <div id="App">
        <em>電話次數(shù): {{num}} </em>
        <!--可以采用v-bind動(dòng)態(tài)傳值-->
        <child :txt="msg" @call="callChild"></child>
        <!--靜態(tài)值-->
        <child txt="txt的屬性值" @call="callChild"></child>
        <!--采用默認(rèn)值 前提是有設(shè)置-->
        <child @call="callChild"></child>
    </div>
    <script>

        let connectCar = new Vue();
        // 全局組件
        Vue.component("child",{
                template: "<p @click='callParent'>{{txt}}</p>",
                props: {
                    txt: {
                        default: "組件自帶的默認(rèn)值"
                    }
                },
                methods: {
                    callParent(){
                        this.$emit("call","Child發(fā)來信息了");
                    }
                }
            })
        
        //組件傳值
        let app = new Vue({
                el: "#App",
                data: {
                    msg: "組件傳值",
                    num: 0
                },
                methods:{
                    callChild(msg){
                        console.log(msg);
                        this.num ++;
                    }
                }
            })
    </script>
</body>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容