vue----05

1、组件参数效验

<div id="root">
   <counter :content="{a:1}""></counter>
   
</div>

<script>
    var counter = {
        props: {
            content: {
                type:String,
                required:true ,//此处指该参数是否为必传参数,
                default : 'default' ,//默认值
                validator : function(value) {//此处为校验器,value代指传入的内容 
                    return (value.length > 5)
                }
            }
        },
        template:'<div >{{content}}</div>',
        data: function() {
            return {
                
            }
        },
        methods: {
        
        }
    }

    var vm  = new Vue({
        el:"#root",
        data: {
            total: 0  
        },
        components: {
            counter:counter 
        },
        methods: { 
           handleChange: function(step) {//step指步长
                // this.total = this.$refs.one.number + this.$refs.two.number;
                this.total += step
                
           }
        }
    })
</script>

2、非props特性

props特性: 属性的传递不会表现在网页中

非props特性: 父组件向子组件传递了内容,子组件没有props, 属性的传递会表现在网页中

猜你喜欢

转载自www.cnblogs.com/my-rw/p/12939998.html