一,什么是单向数据流
就是父组件传给子组件的值,子组件只能读取,不能修改
二,修改会导致什么后果?
当其他组件有使用父组件的值进行判断或一些代码逻辑的时候,会出现错误,而且由于组件页面较多,很难捕获哪个组件出现问题,同时控制台也会出现警告。
三,但有的情况,又不得不更改父组件传过来的值,我们应该怎么办?
可以采取在子组件data中重新定义一给字段,通过watch监听父组件传过来的值,并赋值给重新定义的字段,就可以解决。代码如下:
父组件:
<template>
<div id="app">
<button @click="change">父组件修改</button>
<OnePage :val='val'></OnePage>
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
import OnePage from './components/OnePage.vue'
export default {
name: "App",
components: {
// HelloWorld,
OnePage
},
data() {
return {
val:'555'
};
},
methods: {
change(){
this.val ='777'
}
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
子组件:
<template>
<div>
我是接手过来的值{{ content }}
<button @click="handle">修改</button>
</div>
</template>
<script>
export default {
name: "OnePage",
data() {
return {
content: this.val,
};
},
mounted() {},
props: {
val: {
type: String,
default: "正在加载中",
},
},
watch: {
val(newVal) {
this.content = newVal;
},
},
methods: {
handle() {
this.content = 666;
},
},
};
</script>