父子组件通信和非父子组件通信

最新推荐文章于 2022-07-26 09:00:00 发布

瓜皮瓜皮

最新推荐文章于 2022-07-26 09:00:00 发布

阅读量265

点赞数

本文链接：https://blog.csdn.net/Frost666/article/details/81710718

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        div {
            width: 500px;
            margin:20px auto;
        }
        table{
            width: 500px;
            height: 100px;
            border: 1px solid;


        }
        th{
            border: 1px solid;
            background: green;
        }
        td{
            width: 30%;
            height: 50px;
            border: 1px solid;
        }
    </style>
</head>
<body>
<div id="app">
    <table cellspacing=0>
        <thead><th colspan="3">父组件数据</th></thead>
        <tbody>
            <td>name</td>
            <td >{{name}}{{changs()}}</td>
            <td><input type="text" v-model="name"></td>
        </tbody>
        <tbody>
            <td>age</td>
            <td>{{age}}{{changa()}}</td>
            <td><input type="text" v-model="age"></td>
        </tbody>
    </table>
    <v-table :aa="name" :bb="age" @sonc="sonfChange" @sona="sona"></v-table>
</div>
<script>
    let bus=new Vue();
    new Vue({
        el:"#app",
        data:{
            name:"keepfool",
            age:"28"
        },
        methods:{

            sonfChange(val){
                this.name=val;

            },
            sona(age){
                this.age=age;
            },
            //非父子组件通信
            changs(){
                bus.$on("aaa",(val)=>{
                    this.name=val
                })
            },
            changa(){
                bus.$on("bbb",(val)=>{
                    this.age=val
                })
            }
        },
        components:{
            "vTable":{
                data(){
                   return {
                       "name":"",
                       "age":""
                   }
                },
                props:["aa","bb"],
                template:
                "<div><table cellspacing=0>"+"<thead><th colspan='3'>子组件数据</th></thead>"+
                "<tbody><td>my name</td><td>{{aa}}</td><td><input type='text' v-model='aa'></td></tbody>" +
                "<tbody><td>my age</td><td>{{bb}}</td><td><input type='text'v-model='bb'></td></tbody>" +
                "</table>"+"<button @click='mson'>点我</button><child :aa='aa' :bb='bb'></child></div>",
                methods:{
                    mson(){
                        this.$emit("sonc",this.aa);
                        this.$emit("sona",this.bb)
                    }
                },
                components:{
                    "child":{
                    props:["aa","bb"],
                    template:
                    "<div><table cellspacing=0>"+"<thead><th colspan='3'>孙子组件数据</th></thead>" +
                    "<tbody><td>my name</td><td>{{aa}}</td><td><input type='text' v-model='aa'></td></tbody>" +
                    "<tbody><td>my age</td><td>{{bb}}</td><td><input type='text' v-model='bb'></td></tbody>" +
                    "</table>"+"<button @click='chang'>点我</button></div>",
                    methods:{
                        chang(){
                            bus.$emit("aaa",this.aa);
                            bus.$emit("bbb",this.bb)
                        }
                    }
                    }
                }
            }
        },
    });
</script>
</body>
</html>