Vue基础-14-单向数据流

单向数据流：是Vue中prop提出的一个概念

组件参数传递的时候，可以用props来传递参数，但是不能修改props的值，过程就称为单向数据流

Vue官方解释：

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。

简单说：Vue中我们数据流只能父组件流向子组件。不能直接修改数据流，传递回父组件。自定义事件的方式让组组件主动修改数据。

1. <template>
   <div>
   <p>{{ msg }}</p>
   <p>{{newUser}}</p>
   <button @click="msg = '小飞'">修改</button>
   </div>
   </template>
   
   <script>
   export default {
   props: ["msg"]
   
   };
   </script>
   
   <style>
   </style>

如果你直接修改props的值，会出现一下的问题

props数据修改方案

我们可以使用watch的方发来监控数据

1. <template>
   <div>
   <p>{{ msg }}</p>
   <p>{{newUser}}</p>
   <input type="text" v-model="newUser.name">
   <button @click="msg = '小飞'">修改</button>
   //直接修改对象的属性值，虽然页面不会提示警告，也违反了单向数据流，不推荐写法
   <button @click="user.name = '小飞'">修改user</button>
   </div>
   </template>
   
   <script>
   export default {
   props: ["msg","user"],
   data(){
   return{
   newUser:{
   name:""
   }
   }
   },
   watch:{
   user:{
   handler(){
   this.newUser = {...this.user}
   },
   deep:true,
   immediate:true
   }
   }
   };
   </script>
   
   <style>
   </style>

计算属性也能实现对props的数据更新

1. export default {
   props: ["msg","user"],
   // computed:{
   // newUser(){
   // return {...this.user}
   // }
   // }
   };

为了保证每次父组件的数据更新，也能动态获取

1. export default {
   props:["user"]
   data(){
   return{
   newData:{}
   }
   }
   create(){
   this.newData = user
   }
   }

组件第一次加载的能获取user的数据，以后数据变化，子组件无法更新