vue中的prop

Posted 2023-04-08

参考技术A 学习vue有一段时间了，也写了一些东西。今天看文档突然看到了一个好玩的东西，那就是prop。prop的作用是父组件向子组件单向传递数据，这个过程是单向的。传递的属性可以是静态的，可以是动态的，可以是数字，可以是字符串，可以是数组，还可以是对象，甚至可以在传递数据的时候写一个校验函数进行校验。

子组件：

父组件：

好了，这样就完成了一个最简单的使用prop接收父元素的值

子组件

父组件

可以看到，子组件我未做任何修改，只是在父组件做了一些修改

子组件

父组件

子组件

父组件

prop的状态可以为

父组件

vue props自定义类型检查

参考技术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;

,
)