vue 组件父子孙三代传递以及子传父孙传父

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>父子孙相互通信</title><styl

笔临

5353人浏览 · 2018-11-05 17:36:20

笔临 · 2018-11-05 17:36:20 发布

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子孙相互通信</title>
    <style>
        td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<body>
<section id="app">
    <table border="1" cellspacing="0" width="600px">
        <tr>
            <th colspan="3">父亲的数据</th>
        </tr>
        <tr>
            <td>name</td>
            <td>{{name}}</td>
            <td><input type="text" v-model="name"></td>
        </tr>
        <tr>
            <td>age</td>
            <td>{{age}}</td>
            <td><input type="text" v-model="age"></td>
        </tr>
    </table>
    <v-Child :fn="name" :fa="age" @childbyvalue="childByValue"></v-Child>
</section>


<template id="child">
    <div>
        <button @click="change">子传父</button>
        <table border="1" cellspacing="0" width="600px">
            <tr>
                <th colspan="3">儿子的数据</th>
            </tr>
            <tr>
                <td>Myname</td>
                <td>{{cn}}</td>
                <td><input type="text" v-model="cn"></td>
            </tr>
            <tr>
                <td>Myage</td>
                <td>{{ca}}</td>
                <td><input type="text" v-model="ca"></td>
            </tr>
        </table>
        <v-son :sn="cn" :sa="ca"></v-son>
    </div>
</template>

<template id="son">
    <div>
        <button @click="sonchange">孙子传父</button>
        <table border="1" cellspacing="0" width="600px">
            <tr>
                <th colspan="3">孙子的数据</th>
            </tr>
            <tr>
                <td>Myname</td>
                <td>{{wn}}</td>
                <td><input type="text" v-model="wn"></td>
            </tr>
            <tr>
                <td>Myage</td>
                <td>{{wa}}</td>
                <td><input type="text" v-model="wa"></td>
            </tr>
        </table>
    </div>
</template>
</body>
<script>
    let app1=new Vue({})                   //  过度
    let app = new Vue({
        // el: "#app",
        data: {
            name: "father",
            age: 20
        },
        methods: {
            childByValue(childValue) {
                this.name = childValue.cname
                this.age = childValue.cage
            },
        },
        mounted(){
            let that=this
            app1.$on("sonbyvalue",function (val) {           //获取页面中数据  绑定
                that.name=val.cname
                that.age=val.cage
            })
        },
        components: {
            "vChild": {
                props: ["fn", "fa"],               //接收数据
                template: "#child",
                data: function () {             //每接收一个，返回一次，时时更新
                    return {
                        cn: this.fn,
                        ca: this.fa
                    }
                },
                watch: {                          //监听 数据改变
                    fn: function () {
                        this.cn = this.fn;
                    },
                    fa: function () {
                        this.ca = this.fa;
                    }
                },
                methods: {
                    change() {
                        let obj = {                        //数据写入对象
                            cname: this.cn,
                            cage: this.ca
                        }
                        this.$emit("childbyvalue", obj)      //触发    发送数据
                    }
                },
                components: {
                    "vSon": {
                        props: ["sn", "sa"],                    //接收数据
                        template: "#son",
                        methods:{
                            sonchange(){
                                let obj1={                              //数据写入对象
                                    cname: this.wn,
                                    cage:this.wa
                                }
                                app1.$emit("sonbyvalue",obj1)       //触发    发送数据
                            }
                        },
                        data: function () {                 //时时更新接收数据
                            return {
                                wn: this.sn,
                                wa: this.sa
                            }
                        },
                        watch: {                             //监听 数据改变
                            sn: function () {
                                this.wn = this.sn;
                            },
                            sa: function () {
                                this.wa = this.sa;
                            }
                        }
                    }
                }
            }
        }
    }).$mount('#app')
</script>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^