vue 动态 Prop

Vue.component('my-component', {props: {// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)propA: Number,// 多个可能的类型propB: [String, Number],// 必填的字符串propC: {type: String,required: true},// 带有默认值的数字propD: {type: Number,default: 100},// 带有默认值的对象propE: {type: Object,// 对象或数组默认值必须从一个工厂函数获取default: function () {return { message: 'hello' }}},// 自定义验证函数propF: {validator: function (value) {// 这个值必须匹配下列字符串中的一个return ['success', 'warning', 'danger'].indexOf(value) !== -1}}}
})

动态 Prop
prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。（vue 2.0以后的属性），
当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。
type 可以是下面原生构造器：
String
Number
Boolean
Array
Object
Date
Function
Symbol

一共8种类型

Symbol 本质上是一种唯一标识符，可用作对象的唯一属性名，这样其他人就不会改写或覆盖你设置的属性值。
声明方法：let id = Symbol("id“);
Symbol 数据类型的特点是唯一性，即使是用同一个变量生成的值也不相等。
let id1 = Symbol(‘id’);
let id2 = Symbol(‘id’);
console.log(id1 == id2); //false
有点像[] (嗯你可以试试 [][][]===[])
ymbol 数据类型的另一特点是隐藏性，for···in，object.keys() 不能访问

let id = Symbol("id");let obj = {[id]:'symbol'};for(let option in obj){console.log(obj[option]); //空}

但是也有能够访问的方法：Object.getOwnPropertySymbols
Object.getOwnPropertySymbols 方法会返回一个数组，成员是当前对象的所有用作属性名的 Symbol 值。

let id = Symbol("id");let obj = {[id]:'symbol'};
let array = Object.getOwnPropertySymbols(obj);console.log(array); //[Symbol(id)]console.log(obj[array[0]]);  //'symbol'
————————————————

原文链接
嗯 Symbols 这个属性是ES6 新引入的
（ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因）
嗯这个大概就是原因了

let mySymbol = Symbol();// 第一种写法
let a = {};
a[mySymbol] = 'Hello!';// 第二种写法
let a = {[mySymbol]: 'Hello!'
};// 第三种写法
let a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });// 以上写法都得到同样结果
a[mySymbol] // "Hello!"

上面代码通过方括号结构和Object.defineProperty，将对象的属性名指定为一个 Symbol 值。

注意，Symbol 值作为对象属性名时，不能用点运算符。

参考ES6 官网

我是菜鸟。。我在飞。。。

vue 动态 Prop相关推荐

Vue.js Prop
Prop 的大小写 (camelCase vs kebab-case) HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符.这意味着当你使用 DOM 中的模板时,camel ...
vue动态设置文字布局方式_详解Vue动态添加模板的几种方法
动态添加模板需要收集原始数据的页面,这个时候我们需要很多原始数据收集模板,下面给大家详解Vue 动态添加模板的几种方法,希望对你学习这方面知识有所帮助. 通常我们会在组件里的 template 属性定 ...
vue的Prop属性
转载自 Prop Prop 的大小写 (camelCase vs kebab-case) HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符.这意味着当你使用 DOM 中 ...
Vue的Prop配置
文章目录 1.Prop 的大小写 2.Prop 类型 3.Prop验证 4.传递静态|动态 Prop 5.修改Prop数据适用于:父子组件通信. 如果父组件给子组件传递(函数)数据:本质是子组件给父 ...
使用Vue动态生成form表单的实例代码
具有数据收集.校验和提交功能的表单生成器,包含复选框.单选框.输入框.下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展. 欢迎大家star学习交流: ...
vue动态切换css文件_vue实现样式之间的切换及vue动态样式的实现方法
编程之家收集整理的这篇文章主要介绍了vue实现样式之间的切换及vue动态样式的实现方法,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考. 前言既然我们选择了vue,那么在做东西时就不要想 ...
vue 动态修改路由参数
转载自 vue 动态修改路由参数 import merge from 'webpack-merge':修改原有参数 this.$router.push({query:merge(this.$rout ...
vue 动态组件组件复用_真正的动态声明性组件
vue 动态组件组件复用在这篇简短的文章中,我将重点介绍ADF动态声明性组件. 我的意思是一个众所周知的ADF标签af:declarativeComponent . 它可以用作将页面设计为页面片段和 ...
[vue] 动态给vue的data添加一个新的属性时会发生什么？怎样解决？
[vue] 动态给vue的data添加一个新的属性时会发生什么?怎样解决? 如果在实例创建之后添加新的属性到实例上,它不会触发视图更新.如果想要使添加的值做到响应式,应当使用$set()来添加对象. ...

vue 动态 Prop

vue 动态 Prop相关推荐

最新文章

热门文章