vue单向数据流的理解及更改父组件传过来的值方法_vue 父组件传过来的值怎么声明成自己的-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45936353/article/details/131540696

文章讨论了在Vue.js中单向数据流的概念，即父组件传递给子组件的值只能被读取，不能直接修改。如果尝试修改，可能会导致其他依赖该值的组件出错且难以定位问题。为了解决这一问题，文中提供了一个解决方案：在子组件中通过watch监听父组件传来的值，并在内部定义一个新的数据字段来存储这个值，从而实现间接修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一，什么是单向数据流

就是父组件传给子组件的值，子组件只能读取，不能修改

二，修改会导致什么后果？

当其他组件有使用父组件的值进行判断或一些代码逻辑的时候，会出现错误，而且由于组件页面较多，很难捕获哪个组件出现问题，同时控制台也会出现警告。

三，但有的情况，又不得不更改父组件传过来的值，我们应该怎么办？

可以采取在子组件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>