• vue 组件中数据传递


    //有种形式的传递:从父到子,从子到父,平行级别的传递
    //首先第一种:从父到子,用props属性绑定
    //父级数据:
    new vue({
    "el":"#app",
    data:{
    nickname:"小七"
    }
    })
    //子组件:
    vue.component("myComp",{
    "props":{"username"}, //或者用["username"]
    template:"<h1>欢迎{{username}}</h1>"
    })

    //页面上:
    //1,<my-comp v-bind:username="nickname"></my-comp>
    //2,<my-comp :username="nickname"></my-comp>
    //把父级数据传给页面上的 nickname,再在子组件中的username去取传过来的值

    //props:可以是对象{}也可以是数组[],如下:
    props:{
    "username":{
    type:string,//数据类型
    default:function(){//表示不传值时的默认值为“游客”
    return "游客";
    }
    }
    }

    //数据类型有:string umberooleanfunctionarrayobject
    //
    //第二种:从子到父 ,用自定义事件方法
    //
    //在vue1.0中 vue:$emit("事件名称") //不会冒泡
    // $dispatch("事件名称") //会冒泡
    //在vue2.0中 用$emit("事件名称") 触发事件,没有$dispatch方法了
    // 用$on("事件名称") 监听事件
    //组件中定义函数名触发事件时,不允许用驼峰法
    //
    //自定义事件命名问题:
    //1,自定义事件的名称不允许用驼峰法(尽量用动词)
    //2,自定义事件对应的函数名也不能用托峰法

    //子级数据:
    methods:{
    add:function(){
    this.$emit("myevent",this.count);
    },
    template:"<div @myevent='parentelent'></div>{{count}}"
    }

    //父级组件:
    methods:{
    "parentelent":function(msg){...} //msg就是拿到的count数据
    }


    //第三种,平行组件传递数据:用空实例搭建桥梁,如下
    vue.component("mycomp1",{
    "template":"<div>组件一<button v-on:click:'sendDate'></button></div>",//绑定点击事件
    data:function(){
    return {
    user:{id:1,name:"xzz"}
    }
    },
    "methods":{
    "sendDate":function(){//定义点击事件
    this.$emit('send',this.user);
    }
    }
    });



    vue.component("mycomp2",{
    "template":"<div>{{template22}}组件二</div>",
    created:function(){//生命周期
    this.$on("send",function(datas){//datas就是传入的user的数据
    this.tempDate=datas;
    })
    },
    data:function(){
    return {"tempDate":"数据"}//用于保存数据
    }
    });

    var bus=new Vue();//建一两个组件的通信桥梁,是信息传递对象

  • 相关阅读:
    五种方法实现python3-随机生成10位包含数字和字母的密码
    用matplotlib中imshow()函数绘图
    MTNET 自用ios网络库开源
    移动时代软件测试团队该往哪里去?
    自己做的加速app测试流程的小工具,目前打算开放使用,想注册的朋友抓紧了,嘻嘻
    golang append
    Invalid Image Path
    xcode 插件之KSImageNamed-Xcode
    dissmiss a UISearchBar with an SearchBarController
    nginx server_name
  • 原文地址:https://www.cnblogs.com/xzzzys/p/7761296.html
Copyright © 2020-2023  润新知