组件是Vue最强大的功能之一;组件化编程,允许我们使用小型,独立,通用的可复用型组件构建大型应用;任何页面都可以抽象为组件树;
props数据验证
技术QQ交流群:294088839
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue 组件 props</title> <script type="text/javascript" src="../assets/js/vue.js"></script> </head> <body> <h1>Vue 组件 props</h1> <hr> <div id="app"> <whl here="河南"> </whl> <whl v-bind:here="message"> </whl> </div> </body> </html> <script> var app = new Vue({ el:'#app', data:{ message:'四川' }, //局部组件 如果属性中 有 - 例如 from-here 这样写法 在Vue中需要改成小驼峰的格式 fromHere 就可以认识 components:{ 'whl':{ template:`<div style="color:green"> 我是从{{here}}来的</div>`, props:['here'] } } }); </script>
组件是Vue最强大的功能之一;组件化编程,允许我们使用小型,独立,通用的可复用型组件构建大型应用;任何页面都可以抽象为组件树;
<!--组件需要注册后才能使用。注册有全局注册和局部注册两种方式全局注册:全局:局部注册:局部: 注册后的组件只是在该作用域下有效父组件正向的向子组件传递数据和参数 用 propsprops的值 可以是两种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: {// 布尔值 如果没定义,默认是truetype: Boolean,default: true},propC: {//数组而且是必传type: Number,required: true},propD: {//如果是数组或者对象,默认值必须是一个函数来返回type: Array,default: function() {return [];}},propF: {// 自定义一个验证函数validator: function(value) {return value > 10;}}},
转载于:https://www.cnblogs.com/niusan/p/10390208.html
组件是可扩展的HTML元素,封装可重用的代码。
使用祖册的组件,要确保在初初始化根实例之前注册组件
注册的组件中,data必须是函数
父组件通过props向子组件传递数据,子组件通过事件events给父组件发送消息。
组件实例的作用域是孤立的
props是单向绑定的:当父组件的属性变化时,将传递给子组件,但是不会反过来。这是为了防止子组件无意修改父组件的状态;每次父组件更新时,
子组件的所有props都会更新为最新值,这意味着你不应该在子组件内部改变prop,如果你这么做了,Vue会在控制台给出警告
为什么我们会有修改 prop 中数据的冲动呢?通常是这两种原因:
prop 作为初始值传入后,子组件想把它当作局部数据来用;
prop 作为初始值传入,由子组件处理成其它数据输出。
对这两种原因,正确的应对方式是:
定义一个局部变量,并用 prop 的值初始化它:
props: ['initialCounter'], data: function () { return { counter: this.initialCounter } }定义一个计算属性,处理 prop 的值并返回。
props: ['size'], computed: { normalizedSize: function () { return this.size.trim().toLowerCase() } }注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。
非 Prop 属性
所谓非
prop
属性,就是它可以直接传入组件,而不需要定义相应的prop
。明确给组件定义
prop
是传参的推荐方式,但组件的作者并不总能预见到组件被使用的场景。所以,组件可以接收任意传入的属性,这些属性都会被添加到组件的根元素上。例如,第三方组件
bs-date-input
,当它要和一个 Bootstrap 插件相互操作时,需要在这个第三方组件的 input 上添加data-3d-date-picker
属性,这时可以把属性直接添加到组件上 (不需要事先定义prop
):<bs-date-input data-3d-date-picker="true"></bs-date-input>添加属性
data-3d-date-picker="true"
之后,它会被自动添加到bs-date-input
的根元素上
转载于:https://www.cnblogs.com/xiaofenguo/p/7473806.html
前言
转载:https://www.cnblogs.com/Rosicky-707/p/11543806.html
示例
refArr: { type: Array, default: () => { return [] } }, refFun: { type: Function, default: () => () => {} }, refObj: { type: Object, default: () => ({}) }