vue props自定义类型检查

Posted 2023-04-09

参考技术A 1、创建类型
class Person
constructor(name, age)
this.name = name
this.age = age

2、在组件中指定test的类型
Vue.component('demo',
props:
test:
type: Person,

,
template: '<div>test.name</div>',
)
3、在父组件中的计算属性必须使用"new Person();"创建这个类，使用其它类型则会报错
<div id=app>
<demo :test="Person"></demo>
</div>
var app = new Vue(
el: '#app',
computed:
Person()
var ts=new Person();
ts.name='yyy';
return ts;

,
)

vue之props和自定义事件的驼峰命名

参考技术A 在vue官网中有这样的说明：HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名。
但是，如果使用的是字符串模板的话，就不存在这个限制了。

在Vue的源码中创建Vue组件的时候createComponent()，解析组件的相关属性

而，在extractPropsFromVNodeData()中，Vue通过调用内部方法hyphenate，把驼峰形式的属性转换为横断线形式

除此之外，Vue在initProps()，validateProp()时，都将驼峰形式的属性转换为横断线形式