我们经常会说不能在子组件里面直接修改父组件的数据，但是这里如果父组件是一个对象的数据，那么改变对象的属性值这样是不算改的。不管父组件也好，子组件也好，我子组件拿到父组件的数据它其他指向的是同一个内存空间，所以并不是真的修改了父组件的数据。
Vue官网介绍
image.png
### 3. 单向数据流
props是单向绑定的，当父组件的属性变化时，将传导给子组件，但是不会反过来
而且不允许子组件直接修改父组件中的数据，报错
解决方式：
方式1：如果子组件想把它作为局部数据来使用，可以将数据存入另一个变量中再操作，不影响父组件中的数据
方式2：如果子组件想修改数据并且同步更新到父组件，两个方法：
a.使用.sync（1.0版本中支持，2.0版本中不支持，2.3版本又开始支持）
需要显式地触发一个更新事件
b.可以将父组件中的数据包装成对象，然后在子组件中修改对象的属性(因为对象是引用类型，指向同一个内存空间)---父组件也好，子组件也好，我子组件拿到父组件的数据它其他指向的是同一个内存空间--，推荐 --
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单向数据流</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="itany">
<h2>父组件：{{user.age}}</h2>
<my-hello :name.sync="name" :user="user"></my-hello>
</div>
<template id="hello">
<div>
<h3>子组件：{{user.age}}</h3>
<button @click="change">修改数据</button>
<input type="text" v-model="user.age">
</div>
</template>
<script>
var vm=new Vue({ //父组件
el:'#itany',
data:{
name:'tom',
user:{
name:'zhangsan',
age:24
}
},
components:{
'my-hello':{ //子组件
template:'#hello',
props:['name','user'],
data(){
return {
username:this.name //方式1：将数据存入另一个变量中再操作
}
},
methods:{
change(){
// this.username='alice';
// this.name='alice';
// this.$emit('update:name','alice'); //方式2：a.使用.sync，需要显式地触发一个更新事件
this.user.age=18;
}
}
}
}
});
</script>
</body>
</html>
image.png
参考链接:https://www.cnblogs.com/loveliang/p/14134913.html
权限路由dialog的疑惑？
image.png
这边是不算修改了formData父组件的数据，因为我们父组件这个数据是对象，然后我们子子组件通过v-model这样改变了formData的属性值，内存地址的引用还是同一个地址空间的，所以修改了属性值是可以的
我们这边弹窗的数据也就是formData的数据最好定义在父组件index.vue里面，因为我们编辑edit的时候，那个edit.vue页面也会用到这个formData数据。
网友评论