【vue.js】组件间的通信（父组件->子组件、子组件->父组件）

原创于 2018-08-03 17:52:50 发布 · 182 阅读

0 ·

CC 4.0 BY-SA版权

vue.js 专栏收录该内容

17 篇文章

订阅专栏

本文介绍Vue.js中父子组件间的通信方式，包括从父组件向子组件传递数据及从子组件触发事件通知父组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <!--例1：父组件->子组件之间的通信-->
    <div id="exm1">
        <card :message="msg"></card>
    </div>

    <!--例2：子组件->父组件之间的通信-->
    <div id="exm2">
        <unit @connect="show"></unit>
    </div>
</body>
<script>
    Vue.component('card', {
        props:['message'],
        template:`
        <p>父组件->子组件的通信:{{ message }}</p>
        `
    });

    let vm1=new Vue({
        el:"#exm1",
        data:{
            msg:"我是父组件的内容",
        }
    });


    Vue.component('unit',{
        template:`
        <button @click="send">点击</button>
        `,
        data(){
            return {msg:"我是子组件的内容"}

        },
        methods:{
            send(){
                this.$emit('connect',this.msg);
            }
        },
    });

    let vm2=new Vue({
        el:'#exm2',
        methods:{
            show(msg){
                console.log(msg);
            }
        }
    });
</script>
</html>