vue单向数据流的理解及更改父组件传过来的值方法

一,什么是单向数据流

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

二,修改会导致什么后果?

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

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue 3 中,子组件是不能直接修改从组件传递来的 props 的。这是因为 props 是单向数据流,只能从组件传递到子组件,而不能反过来。如果子组件需要修改从组件传递来的数据,应该通过向组件发送事件来请求修改。 具体来说,可以在子组件中使用 `$emit` 方法来触发一个自定义事件,并传递需要修改的数据。组件可以监听这个自定义事件,并在事件处理函数中修改相应的数据。这样,就可以实现子组件间接修改组件数据的效果。 以一个简单的示例来说明: ```html <!-- 组件 --> <template> <div> <p>Count: {{ count }}</p> <child-component :count="count" @update-count="updateCount" /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent, }, data() { return { count: 0, }; }, methods: { updateCount(newCount) { this.count = newCount; }, }, }; </script> ``` ```html <!-- 子组件 --> <template> <button @click="incrementCount">{{ count }}</button> </template> <script> export default { props: { count: Number, }, methods: { incrementCount() { const newCount = this.count + 1; this.$emit('update-count', newCount); }, }, }; </script> ``` 在这个示例中,子组件 `ChildComponent` 接收一个名为 `count` 的 prop,用于显示当前计数器的。当用户点击按钮时,子组件会通过 `$emit` 方法触发一个名为 `update-count` 的自定义事件,并传递一个新的计数器 `newCount`。组件监听这个自定义事件,并在事件处理函数中将计数器的更新为 `newCount`。 通过这种方式,子组件就可以间接修改组件的数据。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值