vue父子组件传值与参数校验

Vue 2019-10-13 1284

<body>      
父组件通过属性向子组件传递值      
当使用:count时,其值为数字类型,否则为字符      
    <div id="app">      
        <counter :count="0" @change="handleChange"></counter>      
        <counter :count="1" @change="handleChange"></counter>      
        <h3>{{total}}</h3>      
    </div>      
</body>      
<script>      
    //渲染路径      
    // 父组件count属性+值      
       // 子组件props:count      
        //子组件模板{{count}}

    // 子组件通过props来接收值      
    var counter = {      
        props: ['count'],      
        template: '<div @click="handleClick">{{num}}</div>',      
        data: function(){      
          return {      
              num: this.count,      
          }      
        },      
        //子组件修改父组件传递内容过程      
          //设置额外参数num      
           //模板使用num      

        methods: {      
            // 父组件可以随意向子组件传递参数,但子组件不可修改父组件传递内容,否则warning      
            //|单向数据流      
            //当子组件打算修改父组件的内容时,可以通过设置额外参数实现数据传递      
            handleClick: function () {      
                this.num++;      
                //$emit方法用于监听子组件,1代表向外传递的数据      
                this.$emit('change', 1);      
            }      
        }      
    };      
    var app = new Vue({      
        el: '#app',      
        data: {      
            message: 'Hello Vue',      
            total: 1,      

        },      
        components: {      
            counter: counter,      
        },      
        methods: {      
            // 参数代表$emit方法方法中所携带的数据      
            handleChange: function (step) {      
                this.total += step;      
            }      
        }      
    })      
</script>  

组件参数校验可以自定义传入参数的类型。

 

例子:

<body>  
    <div id="app">  
        <child content="Hello"></child>  
    </div>  
</body>  
<script>  
    Vue.component('child', {  
        //         属性,        字符串                    多种类型  
        //props : ['content'], {content: String},{content: [String, Number]}  
                //对象  
        //  content: {type: String},  
        props: {  
            content: {  
                type: String,  
                required: true, //必填字段  
                default: 'Hello Vue', // 默认值  
                /*validate: function (value) {  
                       校验器  
                }*/  
            },  
        },  
        template: '<div>{{content}}</div>'  
    })  
    var app = new Vue({  
        el: '#app',  
        data: {  
            message: 'Hello Vue',  
        }  
    })  
</script>  

props对于参数的传递和类型指定有多种写法。
props特性:指在props中写明了属性,并在组件中为此属性赋予了值,就是使用了props中的参数。
非props特性:在dom中为属性赋予了值,但是在组件的props中没有此属性,因此在经过浏览器渲染后,依然保留了属性。
比如:<child content="hello"></child>-----><div content="hello"></div>

标签:Vue
上一篇 Vue组件2
下一篇 vue组件1

文章评论

评论列表

已有0条评论