vue项目-父组件和子组件之间数据的双向绑定

前言：

vue里面子组件通过props可以获取父组件的数据，但是我们在子组件里无法直接修改props里传递的父组件变量。当然你可以使用vue的子组件事件机制，通过emit来实现反向传递数据的能力。但是我自个用的时候总感觉写好一个组件之后，用的时候还要在父组件里加上对应的事件处理很不爽。所以我一般是用下面的方法来近似地实现类似v-model的功能，有好处有坏处，各位看官自个判断。

功能：

1.父组件和子组件之间实现双向数据绑定

优点：

1.不像使用$emit实现那样麻烦

2.逻辑更加清晰

缺点：

1.变量使用起来麻烦一些，不过也容易区分是父组件变量还是子组件变量

原理：

1.利用props传递父组件的变量名，例如：变量a，传递不再是a，而是"a"

2.利用$parent直接访问父组件

例子：

下面是我写的轮播图组件的一部分代码：

父组件部分：

          <div class="lunbo">
            <Lunbo ref="lunbo"
            :dataList="lunboList"
            :activeIndex_name="'activeIndex'"
            :arrowLeftUrl="require('@/assets/icon/arrow-left-2.png')"
            :arrowRightUrl="require('@/assets/icon/arrow-right-2.png')"
            ></Lunbo>
          </div>

其中，:activeIndex_name="'activeIndex'"这部分是父组件向子组件传递的变量，'activeIndex'是变量名

子组件部分：

export default {
    props: ['dataList','activeIndex_name','arrowLeftUrl','arrowRightUrl'],
    computed: {
      lunboIndex(){
        if(this.$parent[this.activeIndex_name]){
          return this.$parent[this.activeIndex_name];
        }else{
          return 0;
        }
      },
    }
  }

可以看到子组件使用父组件变量变的麻烦了：this.$parent[this.activeIndex_name]

但是如果你想修改父组件变量却变的很简单，直接赋值就好了，例如：this.$parent[this.activeIndex_name]=1

PS：

如果有别的好方法，请务必告诉我，谢谢！