vue 试图改变子组件props 属性值时,控制台报错解决方案

报错信息:Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-...

出错原因:

单向数据流

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

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

解决方案:

使用$emit('事件名称',参数)方法,将子组件数据作为参数抛出给组件的事件(事件名称可自定义),在父级组件监听这个事件,并且在父组件写一个方法作为事件处理函数,则子组件抛出的数据将作为方法的第一个参数传入,然后在此方法内改变prop参数值即可.

实际上数据流向:子组件----$emit触发事件抛出数据---->父组件----监听事件改变prop---->子组件

代码:

子组件:

<template>
  <div>
    <!-- 将v-model 拆解为v-bind:value="value"  v-on:input="value => $emit('input', value)" 实现封装组件的v-model双向绑定-->
    <Tabs type="card" closable @on-tab-remove="handleTabRemove" v-bind:value="value"  v-on:input="value => $emit('input', value)" @on-click="handleTabClick">
      <TabPane v-for="(tab,ind) in tabs" :index="ind+1" ref="tabPanes" :key="tab.component" :name="tab.component" :label="tab.component" :v-if="tab.display" >
        <Content :style="mainContent" ref="main-cotent">
          <router-view />
        </Content>
      </TabPane>
      <Button @click="closeAll" size="small" slot="extra">关闭全部</Button>
    </Tabs>
  </div>
</template>

<script>
export default {
  name: 'i_tabs',
  props: {
    value:{

    },//父组件v-model透传来的value数据,实现双向绑定
    tab_prop: {
      type: Object
    }

  },
  data() {
    return {
      tabs: this.tab_prop.tabs,
      mainContent: {
        'padding-left': '14px',
        'padding-right': '14px',
        background: '#fff',
        height: '1000px'
      }
    };
  },
  created() {

  },
  methods: {
    handleTabsAdd() {

    },
    handleTabRemove(name) {
      console.log('----关闭标签方法,参数name=', name);

      console.log("----关闭tab前tabs:",this.tabs);
      var thiz = this;
      var index;
      this.tabs.forEach(function(element) {
        if (element.component == name) {
          index = thiz.tabs.indexOf(element);
          element.display = false;
        }
      });
      //如果关闭的是最左侧标签,则激活右侧标签,否则激活左侧标签
      if(this.tabs.length > 1){
        let name ="";
        if(index == 0){
          name = this.tabs[index+1].component;

        }else{
          name = this.tabs[index-1].component;
        }
        console.log('----tab组件,关闭后---激活标签==', name);
         this.$emit('change-active-tab-name', name);//向父组件传递数据:借助vue内建的$emit方法触发change-active-tab-name事件,抛出参数name
         this.$router.push(name);
      }
      this.tabs.splice(index, 1);
      console.log("----关闭tab后tabs:",this.tabs);

    },
    closeAll() {},
    handleTabClick(name){
      console.log("---handleTabClick方法,标签name==",name)
      this.$router.push(name);
    }

  },
  mounted() {

  },
  watch: {
    '$route' (newRoute) {
      console.log("------监控路由变化,参数newRoute==",newRoute)
      console.log('----tab组件,---激活标签==', this.value);
    //   const { name, query, params, meta } = newRoute
    }
  },
  components: {}
};
</script>

<style></style>

父组件:

<template>
  <div class="index">
    <Layout :style="{ padding: '0 24px 24px', background: '#fff' }">
          <i_tabs ref="navTabs" :tab_prop="tab_prop" v-model="activeName" @change-active-tab-name="changeActiveName"></i_tabs>
        </Layout>
</div>
</template>

<script>
import i_tabs from '@/components/template/i_tabs/i_tabs.vue';
export default {
  name: 'index',
  props: {},
  data() {
    return {
      user: {},
      mainContent: {
        'padding-left': '14px',
        'padding-right': '14px',
        background: '#fff',
        height: '1000px'
      },
      activeName:"",
      tab_prop: {
        tabs: []
      }
    };
  },
methods: {
    changeActiveName(name){//父组件事件处理函数,改变传入子组件的prop属性值
      this.activeName = name;
    }
}
,
  components: {
    i_tabs
  }
};
</script>
<style></style>