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

Vue 2019-10-13 1552

<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>
JavaScript

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

 

例子:

<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>
JavaScript

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

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

文章评论

评论列表

已有0条评论