Vue之子传父通信

最新推荐文章于 2022-07-24 16:03:03 发布

天刚萌萌亮

最新推荐文章于 2022-07-24 16:03:03 发布

阅读量150

点赞数

本文链接：https://blog.youkuaiyun.com/wmeng13/article/details/88885725

版权

子传父的过程是一个发送消息的过程，发送more消息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <father></father>
    </div>
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script>
        let son = {
            template: "<div>儿子，我收到我老爸{{money}} <button @click='getmore'>多给我一点</button> </div>",
            props: ['money'], // 相当于定义了一个变量
            methods: {
                getmore() {
                    //more函数什么时候触发，在儿子里面这里触发
                    // 发送消息，儿子说要1000
                    this.$emit("more"，1000);
                }
            }
        }
        let father = {
            // 使用属性来进行传递
            // 动态传递数据 在属性前加上:
            // 自定义属性。
            // 自定义事件。
            template: "<div>父亲给了你${{m}}<son @more='gmore' :money='m'></son></div>",
            components: {
                son
            },
            data(){
                return {
                    m: 500
                }
            },
            methods: {
                gmore(val) {
                    this.m = val;
                }
            }
        }
 
        let vm = new Vue({
            el: "#app",
            data: {
 
            },
            methods: {
 
            },
            components: {
                father
            }
        })
    </script>
</body>
</html>