• vue父子元素数据传递


    1.子元素接收数据,无校验

    <div id="app">
        父亲给予:{{money}}
        <!--当前组件的属性=父级的值,给子元素加了一个childmoney属性,属性对应的数据时属于父亲的-->
        <child :childmoney="money"></child>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        //如果要在一个组件使用另一个组件,先保证使用的组件必须真实存在,在需要引用这个组件的实例上通过components注册这个组件,组件需要在父级的模板中通过标签的形式引用
    
    
        let vm=new Vue({
            el:'#app',
            data:{
                money:200
            },
            components:{
                child:{
                    props:['childmoney'],//如用数组,相当于this.childmoney=200,会在当前组件上声明一个childmoney属性,值是父元素的
                    templates:'<div>儿子接收 {{childmoney}} </div> '
                }
            }
        });
    </script>

    2.子元素接收数据,有校验

    <div id="app">
        父亲给予:{{money}}
        <!--当前组件的属性=父级的值,给子元素加了一个childmoney属性,属性对应的数据时属于父亲的-->
        <child :childmoney="money"></child> <--校验属性类型,如不带':'得到的是字符串类型,如带':',如 :childmoney='xxx',则在script中校验其类型
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        //如果要在一个组件使用另一个组件,先保证使用的组件必须真实存在,在需要引用这个组件的实例上通过components注册这个组件,组件需要在父级的模板中通过标签的形式引用
    
    
        let vm=new Vue({
            el:'#app',
            data:{
                money:200
            },
            components:{
                child:{
                    props:{
                        childmoney:{ //属性名和data中的名字不能相同,校验时不能阻断代码的指向,只能警告而已。
                            type:[String, Function, Number, Object]//把childmoney定义为对象,并指定校验类型
                   //default:0 //可以给childmoney赋予默认值,如果不传会调用默认值。
                   required:true //此属性强制childmoney必须传递,但不能与default同时使用

                   validator(val){ //自定义校验器,第一个参数为当前传递的值,返回true表示通过
                    return val>300;
                    }
    } }, template:'<div>儿子接收: {{childmoney}} </div> ' } } }); </script>

     3.子元素向父元素传递数据:父元素先绑定事件,子元素触发这个事件,将参数传递过去(单向数据流,即父级数据刷新,可导致子元素数据刷新,子元素需要改数据,需先通知父级修改后刷新获取。)

    <div id="app">
        父亲给予:{{money}}
        <!--当前组件的属性=父级的值,给子元素加了一个childmoney属性,属性对应的数据时属于父亲的-->
        <child :childmoney="money" @child-msg="changeMoney"></child>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        //如果要在一个组件使用另一个组件,先保证使用的组件必须真实存在,在需要引用这个组件的实例上通过components注册这个组件,组件需要在父级的模板中通过标签的形式引用
    
    
        let vm=new Vue({
            el:'#app',
            data:{
                money:200
            },
            methods:{
              changeMoney(val){
                  this.money=val;
              }
            },
            components:{
                child:{
                    props:{
                        childmoney:{
                            type:[String, Function, Number, Object]
                        }
                    },
                    template:'<div>儿子接收: {{childmoney}} <button @click="getMoney()" >再给点吧</button> </div> ',
                    methods:{
                        getMoney(){
                            this.$emit('child-msg', 800); //触发自己的自定义事件,让父元素的方法执行。
                        }
                    }
                }
            }
        });
    </script>
  • 相关阅读:
    day96-luffy项目-首页轮播图异步更新、课程页面分析与搭建、课程分类群查接口、 课程群查接口、搜索组件和过滤、自定义过滤类
    day94-路飞项目-短信接口频率限制、验证码登陆接口、前台发送验证码 、前台验证码登陆、后台注册接口 、前台注册功能、redis
    day95-Redis操作、管道、celery的使用
    day93-路飞项目-登陆注册模态框、登陆注册接口分析、多种登陆方式、cookies修改页面登陆状态、前台注销 、手机号是否存在接口、腾讯云短信服务、短信验证码接口
    TensorFlow 系列一(在Windows下的安装)
    Matlab中plot基本用法
    Socket (二) 简单的代码实现
    LIBSVM (四) SVM 的参数优化(交叉验证)
    Socket (一) 基础及接口函数
    LIBSVM (三) 葡萄酒种类识别
  • 原文地址:https://www.cnblogs.com/itwatcher/p/8467299.html
Copyright © 2020-2023  润新知