vue之父传子通信（二）

最新推荐文章于 2025-03-21 19:58:31 发布

天刚萌萌亮

最新推荐文章于 2025-03-21 19:58:31 发布

阅读量194

点赞数

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

版权

<!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}}</div>",
            //props: ['money'] // 相当于定义了一个变量
            props:{
                money:{
                    //必须的
                    required:true,
                    //类型是什么
                    type:Number //后面还可以跟String Obeject Array...
                    //需要验证
                    validator(val){
                    return val>500;
                    }
                }       
            }    
        }
        let father = {
            // 使用属性来进行传递
            // 动态传递数据 在属性前加：<son :money='m'>
            // 自定义属性。
            template: "<div>父亲给了你${{m}}<son :money='m'></son></div>",
            components: {
                son
            },
            data(){
                return {
                    m: 500
                }
            }
        }
        let vm = new Vue({
            el: "#app",
            data: {
 
            },
            methods: {
 
            },
            components: {
                father
            }
        })
    </script>
</body>
</html>