vue.js组件之间的通讯-----父亲向儿子传递数据，儿子接收父亲的数据

最新推荐文章于 2022-08-10 19:05:49 发布

weixin_34274029

最新推荐文章于 2022-08-10 19:05:49 发布

阅读量98

点赞数

原文链接：http://www.cnblogs.com/null11/p/7478139.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    //组件之间的通讯 ，1，父与子 2，子与父 3，兄弟之间
    // 父亲传递儿子，默认组件是独立的，相互不能引用数据，可以通过属性方式传递给儿子
    let vm=new Vue({
        el:"#app",
        //根实例上的data都是对象，组件中的都是函数
        data:{
            money:100
        },
        //父级传递给子集数据通过绑定属性,如果传递多个可以数组中写多个
        //如果传递的是boolean或这个数组需要加:
        //template会替代div，id为app的标签
        template:'<div><child :m="money" o="美女"></child></div>',

        components: {
            child: {
                //子集接收给父级给的数据，通过props属性接收
                props: {
                    //规定传递过来的m是不符合数组里面类型，也会渲染页面上，只是提示
                    m: {
                        type: [Number, Boolean, Array, String],
                        // default:'500' //默认值，如果父级没有传递时候，会采用默认值
                        required: true ////必须传递 不能和default同时引用
                    },
                    o: {
                        type: String,
                        //自定义校验器
                        validator(val) { //val代表o属性传递过来的值
                            return val === '美女';
                        }
                    }
                    },
                    computed: {
                        b() {
                            //这里的this指向子集child
                            //父亲的数据儿子不能更改 错误写法 this.o="丑呀"
                            return "大大" + this.o;
                        }
                    },
                    template: "<div>儿子 {{m}} {{b}}</div>"
                }
            }
    });
</script>
</html>

转载于:https://www.cnblogs.com/null11/p/7478139.html

weixin_34274029

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js组件之间的通讯-----父亲向儿子传递数据，儿子接收父亲的数据

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"></div>...
复制链接

扫一扫