void mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property b

简介: void mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: vue项目示例,请参考甄佰 单向数据流所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。

void mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated:

单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。

1560217648343
vue官网截图

vue报错常见场景,以下动态tab切换,子组件分页需要改变初始传参的正确写法

在父组件引入子组件

    <div class="m-tab">
      <div class="m-navbar">
        <a v-for="item in tablist" class="m-items" :class="{ mactive : activetab == item.idx }" @click="tabs(item.idx)" :key="item.idx">
          {{ item.title }}
          <i class="m-sign"></i>
        </a>
      </div>
      <div v-for="item in tablist" class="m-sub" v-show="activetab == item.idx">
        <insuresub :post="item"></insuresub>
      </div>
    </div>
    
  import navbar from '@/components/navbar'
  import insuresub from '@/components/insuresub'


  export default {
    name: "insure",
    components: {
      navbar,
      insuresub,
    },
    data() {
      return {
        activetab: 'c1',
        tablist: [{
          idx: 'c1',
          title: '医疗险',
          page: '2',
          count: '12',
          sub:[{
            price: '100'
          },{
            price: '80'
          }]
        },{
          idx: 'c2',
          title: '重疾险',
          page: '5',
          count: '8',
          sub:[{
            price: '70'
          },{
            price: '90'
          }]
        },{
          idx: 'c3',
          title: '寿险',
          page: '3',
          count: '11',
          sub:[{
            price: '200'
          },{
            price: '800'
          }]
        }],
      }
    },
    methods: {
      tabs (e){
        this.activetab = e;
      }
    }
  }

下面是子组件接收传参动态改变,子组件 next() 需要动态请求数据达到分页效果,我这里写的静态数据方便理解

{{ post.idx }}-{{ post.page }}页/{{ post.count }}页
    <a v-for="item in list.sub" class="card" @click="next(list.page)">
      <div class="cardhead">
        <div class="cardbox">
          <div class="color-m size-a">1623人正在保障中...</div>
          <div class="cardname">产品计划</div>
          <div class="color-c size-a">可多次赔付 | 340种疾病 | 保障全面</div>
          <span class="color-l">¥<span class="size-e">{{ item.price }}</span></span>起
        </div>
        <img class="cardimg" src="../assets/images/index4.jpg" alt="图片加载失败" />
      </div>
      <div class="cardbody">
        <div>
          <div class="size-c">200万</div>
          <span class="color-c size-a">保额</span>
        </div>
        <div>
          <div class="size-c">1周岁-60周岁</div>
          <span class="color-c size-a">投保年龄</span>
        </div>
        <div>
          <div class="size-c">1年</div>
          <span class="color-c size-a">投保期限</span>
        </div>
      </div>
    </a>
    
    
    export default {
      name: "insuresub",
      data(){
        return {
          list:this.post
        }
      },
      props:['post'],
      methods: {
        next: function(e){
          console.log(e)
          this.list = {
            idx: 'c1',
            title: '医疗险',
            page: '2',
            count: '12',
            sub:[{
              price: '198'
            },{
              price: '280'
            }]
          }
        }
      }
    }

下图看效果

1560217951968

目录
相关文章
|
JSON 应用服务中间件 nginx
【Nginx】第十二节 配置跨域访问
【Nginx】第十二节 配置跨域访问
1005 0
【Nginx】第十二节 配置跨域访问
|
移动开发 资源调度 JavaScript
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
这篇文章介绍了在Vue移动端网页中使用`pdfh5`和`vue-pdf`两个插件来实现PDF文件的预览,包括滚动查看、缩放、添加水印、分页加载、跳转指定页数等功能。
8211 1
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
|
JavaScript 前端开发 数据可视化
用Vue搭建一个大屏数据可视化页面实战一(Vue实战系列)
用Vue搭建一个大屏数据可视化页面实战一(Vue实战系列)
1923 3
|
定位技术 API 数据格式
Element UI【详解】el-cascader 级联选择器 - 行政区划选择(可以选择任意一级),限定选择范围,获取并解析选中的节点
Element UI【详解】el-cascader 级联选择器 - 行政区划选择(可以选择任意一级),限定选择范围,获取并解析选中的节点
2612 0
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
3325 0
|
开发框架 小程序
uniApp——Eslint报错'uni' is not defined
uniApp——Eslint报错'uni' is not defined
645 0
|
JavaScript
vue 父组件修改子组件的样式——深度作用选择器 >>> 、 /deep/ 、 ::v-deep
vue 父组件修改子组件的样式——深度作用选择器 >>> 、 /deep/ 、 ::v-deep
444 0
|
存储 缓存 JSON
uniapp本地存储(uni.setStorageSync和uni.setStorage)
uniapp本地存储(uni.setStorageSync和uni.setStorage)
1649 0
|
JavaScript
vue中高精度小数问题(加减乘除方法封装)处理
vue中高精度小数问题(加减乘除方法封装)处理
476 0