use a data or computed property based on the prop's value.

这里写图片描述
要实现功能的情况:
点击右侧的登录、注册按钮,对应的弹出层显示对应的登录页面或者注册页面
1.原本用父组件传值给子组flag,再通过更改flag与index来控制显示切换登录与注册页面,发现报以上问题的错误
原因:prop是单向绑定,不能更改数据,只能由父组件传输过来
代码显示:
template部分的代码

<ul class="menu">
    <li v-for="(item,index) in menu" :class="{'active':flag==index}" @click="light(index)">{{item.name}}</li>
 </ul>

js部分的代码

export default {
   props: {
         'flag': 0
   },
   data () {
   },
   methods: {
        light (index) {
             this.flag = index;
        }
   }
 };

2.解决方案
原因:prop中的值不能更改,但是可以赋值给data中的值
将flag改成myflag
template部分的代码

<ul class="menu">
    <li v-for="(item,index) in menu" :class="{'active':myflag==index}" @click="light(index)">{{item.name}}</li>
 </ul>

js部分的代码

export default {
   props: {
         'flag': 0
   },
   data () {
     return{
        myflag: this.flag
     };
   },
   methods: {
        light (index) {
             this.myflag = index;
        }
   }
 };

这里写图片描述

  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在Vue中,当你需要修改一个组件的prop属性时,最好不要直接修改,因为这个值在父组件重新渲染时会被覆盖。相反,你应该基于prop的值使用一个datacomputed属性来进行修改。这样做可以确保你的代码更加可靠,并且可以避免出现一些意想不到的问题。 ### 回答2: 在Vue.js中,我们可以通过props来向子组件传递数据。然而,当我们在子组件中直接对props进行修改时,这是不可取的。这是因为,props是通过父组件向子组件传递数据的,当父组件重新渲染时,props的值也会被重写,而这样会导致我们在子组件中对props的修改被覆盖,从而导致一些意想不到的问题。 为了避免这种问题,Vue.js的开发者建议我们不要直接对props进行修改。相反,我们应该使用数据或计算属性来基于props的值创建相应的组件内部数据,并对这些数据进行操作。这样,我们就能够避免对props进行直接修改,从而保证组件在重新渲染时不会出现问题。 使用数据或计算属性来创建内部数据的好处在于,数据和计算属性会自动更新,同时也会受到响应式系统的跟踪和管理。这意味着,当props的值发生改变时,组件内部的数据和计算属性也会自动更新,从而确保组件渲染的正确性。而这样的操作也更符合Vue.js的数据流管理规则,同时也能提高代码的可复用性和可维护性。 在实际开发中,我们应该尽量避免对props进行直接修改,而是采用数据或计算属性的方式来处理数据。这样能够确保组件的正确性和稳定性,并且可以提高代码的健壮性和可扩展性。 ### 回答3: 组件中的 props 是用来传递数据的,但是我们应该避免直接修改 props 的值,因为这个值会在父组件重新渲染时被覆盖掉。取而代之的是,我们可以使用一个基于 props 值的 datacomputed 属性来使用这个值。 为什么要这样做呢?因为组件中的 props 具有单向数据流的特性,即只能由父组件传递到子组件,子组件不应该对 props 的值进行修改。如果几个子组件都对同一个 prop 进行了修改,那么就会导致这个 prop 的值在父组件重新渲染时被覆盖掉,从而引起不必要的 bug。 使用 datacomputed 属性则可以避免这个问题。我们可以把需要对 prop 进行修改的值存放到一个 data 属性中,然后在组件内部使用修改过的值。当父组件重新渲染时,data 属性中的值不会被覆盖,从而可以避免后续的问题。 另外,使用 computed 属性也可以避免直接修改 prop 的问题。computed 属性可以根据 prop 的值计算得出一个新的值,这样就可以避免直接修改 prop 的值,同时又能够使用修改过的值。 综上所述,为了避免直接修改 prop 的问题,我们应该尽可能地使用 datacomputed 属性来使用 prop 的值,这样才能保证组件的数据流是清晰的,避免出现不必要的 bug。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值