踩坑Vue2.0属性props之“双向绑定“

为了避免双向绑定在项目中容易造成的数据混乱，vue2.0 取消了props 的双向绑定，改成只能从父级传到子级的单向数据流。
第一次在项目中遇到这样的问题，这里做一下记录。

百度了一下，发现了常见的两种方式：

• 通过创建一个props属性的副本，watch props属性 赋予data副本 来同步组件外对props的修改，watch data副本，emit一个函数 通知到组件外
• 通过v-model语法糖来实现

这里采用的是v-model，相对来说，代码更简洁。
这里有两个组件父组件A与子组件B：

• 代码中父组件引用子组件,作为父组件页面的导航栏；
• 子组件点击导航栏可以改变父组件对应的视图；

问题：当用户从首页导航进入该父组件A的时候，需要显示用户所点击的那个标签对应的页面。
思考：
1.需要切换到目标标签对应的视图。
2.并且改变子组件控制显示导航高亮的索引，设为目标标签对应的索引；

对于思考1，可以在从首页进入父组件A的时候添加一个目标索引属性，在父组件mounted（注意不能在created的时候，否则无法改变子组件中的数据）的时候通过this.$route.目标索引拿到，然后渲染目标索引对应的页面。
对于思考2，需要设置改变子组件的导航索引，子组件导航切换的时候是通过activeIndex来控制的，首先我想到了，在父组件中传入activeIndex属性，在子组件的中props中注册一下，通过改变父组件的activeIndex来改变子组件props中的activeIndex，但是经过一番尝试，失败，因为文章前面也说过：vue2.0 取消了props 的双向绑定，改成只能从父级传到子级的单向数据流。

这次我用v-model来达到双向绑定的效果(本质上还是单向数据流)：
a. 在父组件A中调用子组件的地方<b v-model='activeIndex'>,这里的activeIndex是从首页接收过来的。
b. 然后在子组件B中的props中注册value，这个value就是v-model传过来的默认的属性名称。
c. 通过watch监听value属性的变化，来改变子组件B当前页面的activeIndex

这样就达到了在从首页进入父组件A的时候，改变子组件B的控制高亮的索引。

子组件B

<template>
  <div class="navigator-wraper flex flexrb">
    <div class="navigator-items-wrapper flex flexcol" v-for="(item,index) of navigators" 
    :key="item+index" @click="handleNavigatorChange(index)">
      <p class="navigator-title cp ls2" :class="{'title-active':index==activeIndex}">{
   
   {
   
   item}}</p>
      <p v-if="index==activeIndex" :value="value" class="active-line bgr mgl20"></p>
    </div>
  </div>
</template>

<script>
export default {
   
   
  name: "",
  props: {
   
   
    value: {
   
   
      type: Number,
      default: