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>