直接修改props中的值,浏览器发出警告

2019-01-14 admin

改变了子组件中的props中的值,浏览器会发出警告 在vue文档中的单向数据流也提到了

每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。

在一次项目中,我直接更改了父组件传递给子组件的值。浏览器果然报错了。代码如下

父组件:

<template>
    <components :orderdata="orderdata" :is="tabCom[ind]"></components>
</template>
<script>
export default {
  data() {
    return {
        orderdata: []
    }
  }
}
</script>

子组件

<template>
    <div :key="index" class="bigbox" v-for="(item,index) of orderdata">
</template>
<script>
export default {
  props: {
    orderdata: {
      type: Array,
      required: true
  },
  methods: {
    cancelOrderlist(id) {
      this.$messagebox
        .confirm('确定取消此订单?')
        .then(action => {
          if (action === 'confirm') {
            cancelOrder(this.token, id).then(res => {
              getOrder(this.token).then(res => {
                this.orderdata = res.data.data.data // 这里直接更改props中的值,浏览器发出警告
              })
            })
          }
        })
        .catch(err => {
          if (err === 'cancel') {
          }
        })
    }
}
</script>

但是我确实需要修改props的值,并将其数据渲染给dom元素 那么解决办法就是不直接更改props的值,而是更改其引用类型,这样控制台就不会报错了。

父组件:

<template>
    <components :orderobj="orderobj" :is="tabCom[ind]"></components>
</template>
<script>
export default {
  data() {
    return {
      orderobj: {
        orderdata: []
      }
    }
  }
}
</script>

子组件

<template>
    <div :key="index" class="bigbox" v-for="(item,index) of orderobj.orderdata">
</template>
<script>
export default {
  props: {
    orderobj: {
      type: Object,
      required: true
  },
  methods: {
    cancelOrderlist(id) {
      this.$messagebox
        .confirm('确定取消此订单?')
        .then(action => {
          if (action === 'confirm') {
            cancelOrder(this.token, id).then(res => {
              getOrder(this.token).then(res => {
                this.orderobj.orderdata = res.data.data.data // 这里直接更改props中的值,浏览器发出警告
              })
            })
          }
        })
        .catch(err => {
          if (err === 'cancel') {
          }
        })
    }
}
</script>

这样就不是改变值,而是通过改变引用类型。这是因为父组件传递给子组件的是一个引用,也就是内存地址。我们改变了orderdata的值,并没有改变内存地址。所以不会发出警告

[转载]原文链接:https://segmentfault.com/a/1190000017881509

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-50954.html

文章标题:直接修改props中的值,浏览器发出警告

相关文章
浅谈HTML5对移动广告平台的价值
就像电影盛行时那些电影人不得不面对新崛起的电视媒体带来的巨大冲击一样,如今的传统媒体正在面临互联网的挑战,而且越是年轻化的群体对互联网的依赖越强,近年来飞速增长的移动互联网趋势更甚,已经习惯了24小时手机陪伴的我们已经越来越离不开移动互联网...
2015-11-12
Javascript实现数组中的元素上下移动
交换数组可以实现元素上下移动了,这个效果我们在表格或以前排序算法中都会用到,下面来看一个JavaScript下实现交换数组元素上下移动例子 在写项目的时候,要实现一个数组记录上下移动的示例。写起来也没有没麻烦,无非是交换数组元素。最终实现代...
2017-05-02
bootstrap table 数据表格行内修改的实现代码
js中设置列的属性 editable : { type : &#x27;text&#x27;,&#x2F;&#x2F;数据显示在文本框内 emptytext : &quot;--&quot;,&#x2F;&#x2F;数据为空时显示 vali...
2017-03-14
JavaScript中的call方法和apply方法使用对比
方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象。 说明: call 方法可以用来代替另一个对象调用一个方法。c...
2017-03-29
五个值得尝试的前端开发工具
在过去的几年时间里,出现了许多全新的网页应用程序,不过,由于应用程序的功能越来越丰富,也导致了前端开发的复杂度大幅增加。 现在也有不少前端开发工具,比如Backbone和EmberJS框架都能提供稳定的App开发解决方案。同时,Javasc...
2015-12-23
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
本文主要通过代码示例给大家介绍IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题;分步介绍,先给大家介绍IE7浏览器窗口大小改变事件执行多次bug,具体问题分析及解决方案请看下文。 var resizeTi...
2017-03-29
透过浏览器看HTTP缓存
Not Modified 客户端有缓冲的文档并发出了一个条件性的请求(一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档)。服务器告诉客户,原来缓冲的文档还可以继续使用。 如果客户端在请求一个文件的时候,发现自己...
2016-01-13
详解Vue2 无限级分类(添加,删除,修改)
本人对vue不是很懂,搜索了很多关于Vue2 无限级分类介绍,下面我来记录一下,有需要了解Vue2 无限级分类的朋友可参考。希望此文章对各位有所帮助。 &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en...
2017-03-13
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
本文实例讲述了JS实现可直接显示网页代码运行效果的HTML代码预览功能。分享给大家供大家参考。具体如下: JavaScript实现HTML代码预览功能,直接在网页上显示代码运行的效果,就例如点击“运行代码”后的效果,使用时,你只需将需要运行...
2017-03-27
javascript 中的try catch应用总结
&lt;script language=&quot;javascript&quot;&gt; try { throw new Error(10,&quot;asdasdasd&quot;) } catch (e) { alert(e.mes...
2017-04-05
回到顶部