• 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>
  • 相关阅读:
    HDU 4607 Park Visit (DP最长链)
    HDU 4607 Park Visit (DP最长链)
    POJ 2388 Who's in the Middle (快速选择算法:O(N)求数列第K大)
    POJ 2388 Who's in the Middle (快速选择算法:O(N)求数列第K大)
    HDU 4609 3-idiots (FFT-快速傅立叶变换)
    HDU 4609 3-idiots (FFT-快速傅立叶变换)
    POJ 3084 Panic Room (最小割建模)
    POJ 3084 Panic Room (最小割建模)
    POJ 1966 Cable TV Network (无向图点连通度)
    POJ 1966 Cable TV Network (无向图点连通度)
  • 原文地址:https://www.cnblogs.com/itwatcher/p/8467299.html
Copyright © 2020-2023  润新知