组件接受的大多数选项与Vue实例的选项相同，选项道具是组件中非常重要的选项。在Vue中，父子组件之间的关系可以概括为道具向下，事件向上。父组件通过道具向下传递数据给子组件，子组件通过事件向父组件发送消息。接下来，我们将通过这篇文章介绍Vue中的Props，让我们一起来看看吧！

单向数据流

所有道具在其父道具和子道具之间形成单向向下绑定：父道具的更新会向下流到子组件，但不会反过来。这将防止子组件意外更改父组件的状态，这将使应用程序的数据流难以理解。

此外，每次更新父组件时，子组件中的所有prop都将被刷新为最新值。这意味着您不应该在子组件中更改道具。如果您这样做，Vue将在浏览器的控制台中发出警告。

问题

先简单说说上面的警示现象。也许大多数人都遇到过。

使用场景

父组件

backlog modal : ismodalopen=' ismodalopen ' @ closemodal=' handlecolosemodal '/backlog modal backlog modal是一个弹出窗口组件。通过isModalOpen传入以确定弹出窗口的打开和关闭状态的isModalOpen是父组件的一个变量，其类型是由布尔closeModal监视器子组件调度的自定义事件closeModal子组件

//typescript export default class backlog modal extends vue { @ prop()}使用private ismodalopen : boolean；private handleConfirm():使{ this }无效。$Message.info('单击确定')；这个。$ emit(' closeModal ')；} private handleClose(): void { this。$ message . info(' Clicked cancal ')；这个。$ emit(' closeModal ')；}}通过@Prop()注释获取父组件传递的isModalOpen属性。该页面通过v-model与属性isModalOpen绑定。由于弹出组件在关闭时会自动将isModalOpen的值设置为false，这里直接修改的是父组件传递的isModalOpen属性。由于props属性是一个单向数据流，并且具有不可变的状态，页面将抛出一个警告来解决这个问题

导出默认类BackLogModal扩展Vue { private isopen : boolean=false；@Prop() private isModalOpen:布尔值；@ Watch(' isModalOpen ')private Watch odalopen(new val :布尔值，oldVal:布尔值){ console.log(newVal，oldVal)；如果(newVal！==oldVal){ this . isopen=new val；} } private handleConfirm(): void { this。$Message.info('单击确定')；这个。$ emit(' closeModal ')；} private handleClose(): void { this。$ message . info(' Clicked cancal ')；这个。$ emit(' closeModal ')；}}定义子组件私有变量isOpen，并将其绑定到页面弹出窗口。使用@Watch('isModalOpen ')来监视父组件传入的isModalOpen属性。一旦值发生变化，更新局部变量isOpen，以确保弹出窗口的正常打开和关闭。以上是边肖介绍的Vue中的Props(不可变状态)。希望对大家有帮助。如果你有任何问题，请给我留言，边肖。非常感谢您对我们网站的支持！