• Vue组件 props


    组件是Vue最强大的功能之一;组件化编程,允许我们使用小型,独立,通用的可复用型组件构建大型应用;任何页面都可以抽象为组件树;

    <!--
    组件需要注册后才能使用。
    注册有全局注册和局部注册两种方式
    全局注册:
    全局:
    局部注册:
    局部: 注册后的组件只是在该作用域下有效

    父组件正向的向子组件传递数据和参数 用 props
    props的值 可以是两种
    1,字符串数组 props:['message']
    2,对象 props: {}
    props中的数据来自父元素。data中的数据来自组件自己的数据。
    两种数据都可以在computed,methods,template中使用
    单项数据流
    父组件将改变后的数据传递给子组件,反过来是不行的。

    业务中需要改变props的情况
    1,父组件传递初始值进来,子组件将他作为初始值保存起来,
    在自己的作用域下面随意修改和使用。
    props:['msg'],
    data() {
    return {
    message: this.msg;
    }
    }
    2,props作为需要被改变的原始值传入可以使用计算属性
    props:['msg'],
    computed: {
    message() {
    return this.msg;
    }
    }


    由于HTML 不区分大小写,当使用DOM模板时候。骆峰命名的props的名称
    转为短横线分隔符
    showText ==> show-text

     

    当DOM作为模板时会受到HTML的一些限制,
    因为Vue浏览器解析和标准化HTML后才能获取模板内容
    以下来源不会受限制:
    1,<script type="text/x-template">
    2, JS 内联模板字符串
    3, .vue组件

    如果限制了:方案使用is
    <table>
    <my-component></my-component>
    </table>

    <table>
    <tr is="myComponent"></tr>
    </table>
    -->

     props数据验证 

    //
    /**
    * 数据验证的type类型可以是
    * String,
    * Number,
    * Boolean,
    * Object,
    * Array,
    * Function
    * type也可以是一个自定义的构造器,使用instanceof 检测
    *
    * 当prop验证失败的时候,在开发版本下会在控制台抛出一条警告
    *
    */
    props: {
    //数据验证
    name: String, //字符串类型
    age: [String, Number], // 必须是字符串或者数组类型
    propB: {
    // 布尔值 如果没定义,默认是true
    type: Boolean,
    default: true
    },
    propC: {
    //数组而且是必传
    type: Number,
    required: true
    },
    propD: {
    //如果是数组或者对象,默认值必须是一个函数来返回
    type: Array,
    default: function() {
    return [];
    }
    },
    propF: {
    // 自定义一个验证函数
    validator: function(value) {
    return value > 10;
    }
    }
    },
  • 相关阅读:
    Centos7下搭建SVN
    Ubuntu设置telnet 远程登录(root权限)
    E: 无法打开锁文件 /var/lib/dpkg/lock-frontend
    使用ICMP搭建隧道(PingTunnel)
    Centos7安装Redis
    idea 激活方法
    Chrome 浏览器安装 ChroPath 插件
    jmeter引入外部jar包的方法
    maven安装
    eclipse集成 json editor plugin插件
  • 原文地址:https://www.cnblogs.com/niusan/p/10390208.html
Copyright © 2020-2023  润新知