props传值后修改该值

记录自己遇到的一个问题

写项目的过程中发现写的公共样式header.vue组件里面每个标题路由组件点击的时候都有个下划线，刚开始是用的data数据传了一个首页默认值，然后绑定点击事件，让实参=这个默认值的时候显示，但是这样做会导致每次点击一个标题的时候，都会先默认点击首页，第二次才会到该组件上，于是使用了props传值的方法，每个路由组件都给这个header组件传个值active,例如社区精选组件

community.vue组件

<Header active='community'/>,

然后在header组件里面props接收， 然后data里面定义一个中转变量接收这个值,reallyactive:active,去动态修改这个reallyactive的值，就可以实现点击哪个标题，样式跟着走

**Header.vue组件

<template>
      <ul>
        <li
          :class="[{ 'nav-active': reallyactive === 'home' }]"
          @click="getActive('home')"
        >
          <router-link to="/home">首页</router-link>
        </li>
        <li
          :class="[{ 'nav-active': reallyactive === 'community' }]"
          @click="getActive('community')"
        >
          <router-link to="/community">社区精选</router-link>
        </li>
      </ul>
</template>

<script>
export default {
  name: 'aHeader',
  props: {
    active: {
      type: String,
      default: '',
    }
  },
  data () {
    return {
      reallyactive: this.active
    }
  },
  methods: {
    getActive (value) {
      if (value) {
        this.reallyactive = value
      }
    }
  }
}
</script>

备注：props 是只读的，Vue 底层会监测你对 props 的修改，如果修改就会有警告，

若有业务需求需要修改，那么要把 props 中的内容到 data 中一份，然后修改 data 中的数据