Vue中如何实现单项数据流props实例展示？

本文共计813个文字，预计阅读时间需要4分钟。

父组件通过props传递动态值showStoreList给子组件，但若在子组件中直接使用并修改此值会报错；因为父级更新会传递给子组件，但反向操作不执行；这种情况下，可使用以下方法：

javascriptfunction ChildComponent(props) { // 使用父组件传递的值 const showStoreList=props.showStoreList;

// 修改showStoreList，但不直接赋值，而是通过调用父组件方法 const handleUpdate=()=> { props.onUpdateShowStoreList(!showStoreList); };

return ( {showStoreList ? '显示' : '隐藏'} );}

父组件传递动态值showStoreList，子组件通过props接收，但是如果在子组件中直接使用并修改这个值会报错；

因为父级的更新会传递给子组件，但是反过来则不行；

这种情况下，可以使用computed或watch来获取props中的值

以上实例不难，下面由易盾网络小编整理的补充内容：

Vue2.x通过props传递数据是单向的了，也就是父组件数据变化时会传递给子组件，但是反过来不行。

业务中会经常遇到两种需要改变prop的情况，

一种是父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。