vue-父子组件之间的通信以及兄弟组件的通信

最新推荐文章于 2020-12-09 14:45:15 发布

原创最新推荐文章于 2020-12-09 14:45:15 发布 · 258 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用Vue.js实现的父子组件及孙子组件间的通信案例。通过具体代码展示了如何在不同层级的组件间传递数据和触发事件，实现了从父组件到子组件再到孙子组件的数据流动与回调机制。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        table{
            text-align: center;
            margin:0 auto;
        }
        div{
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <table border="1" cellpadding="0" cellspacing="0">
            <tr><td colspan="3">父组件数据</td></tr>
            <tr><td>name</td><td>{{name}}{{ff()}}</td><td><input type="text" v-model="name"></td></tr>
            <tr><td>age</td><td>{{age}}{{ff()}}</td><td><input type="text" v-model="age"></td></tr>
        </table>
        <v-son :son-name="name" :son-age="age" @sza="gg"></v-son>
    </div>
    <template id="son">
        <div>
            <button @click="sonChange">子组件按钮</button>
            <table border="1" cellpadding="0" cellspacing="0">
                <tr><td colspan="3">子组件数据</td></tr>
                <tr><td>name</td><td>{{sonName}}</td><td><input type="text" v-model="sonName"></td></tr>
                <tr><td>age</td><td>{{sonAge}}</td><td><input type="text" v-model="sonAge"></td></tr>
            </table>
            <g-son :g-name="sonName" :g-age="sonAge"></g-son>
        </div>
    </template>
    <template id="vgson">
        <div>
            <button @click="gchan">孙子组件按钮</button>
            <table border="1" cellpadding="0" cellspacing="0">
                <tr><td colspan="3">孙子组件数据</td></tr>
                <tr><td>name</td><td>{{gName}}</td><td><input type="text" v-model="gName"></td></tr>
                <tr><td>age</td><td>{{gAge}}</td><td><input type="text" v-model="gAge"></td></tr>
            </table>
        </div>
    </template>
</body>
<script src="vue.js"></script>
<script>
    var bus=new Vue();
const app=new Vue({
    el:"#app",
    data:{
        name:"keep",
        age:"28"
    },
    methods:{
      gg(val1,val2){
          this.name=val1
          this.age=val2
      },
        ff(){
            bus.$on("suibian", (val1,val2)=> {
                this.name=val1;
                this.age=val2
            })
        }
    },
    components:{
        "vSon":{
            template:"#son",
            methods:{
              sonChange(){
                  this.$emit("sza",this.sonName,this.sonAge)
              }
            },
            props:["sonName","sonAge"],
            components:{
                "gSon":{
                    template:"#vgson",
                    props:["gName","gAge"],
                    methods:{
                        gchan(){
                            bus.$emit("suibian",this.gName,this.gAge);
                        },
                }
                }
            },
        }
    }
})
</script>
</html>