vue 组件开发 ---- 【v-model】实现双向绑定

场景需求

1. 页面向组件传值，组件内部根据页面传入的值判断显示具体的值；
2. 组件内部的值改变，会直接改变父组件或者页面的变量的值；
3. 当父组件或者页面不传入值时，组件能够根据默认值使用。

类似 van-stepper 【步进器】、tabbar 【标签栏】等的实现！

效果图

1. 操作和输出
   
2. 输出位置
   

需求分析

1. 实现效果的vue文档 ---- 自定义组件的 v-model

注意：一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。

2. 父组件或者页面调用组件，v-model 传选中值！

	<rui-navbar :navbars="navbars" v-model="index" @change="getCurrentNavbar"></rui-navbar>

注意：此处 v-model 内部的值可以是任意其他字段！

3. rui-navbar 组件接收 v-model 值

props: {
    navbars: {
      type: Array,
      default: []
    },
    // 此处一定要用value
    value: {
      type: Number,
      default: 0
    }
  }

注意：此处接收 v-model 值的参数名字段必须是value！

4. 将 v-model 的值赋值给组件内部变量

	data(){
    return {
      status: this.value
    }
  }

注意：此处是将 value 的值给组件的变量，组件内部操作，直接改变该变量！必须赋值 value，否则调用组件时，不能修改默认值！

5. 监听 status 和 value 的值变化

watch: {
    value: {
      handler(newVal, oldVal) {
        this.status = newVal;
      },
      deep: true,
      immediate: true
    },
    status(val){
      this.$emit('input', val);
    }
  }

注意：1. 将更新的 value 赋值 status；status 新的值通过自定义的 input 事件抛出！
2. status 新的值通过自定义的 input 事件抛出！
3. status 新的值通过自定义的 input 事件抛出！

6. 组件内部操作 status

methods: {
    changeNavbar: function(value){
      this.status = value;
      var text = this.navbars[value];
      this.$emit('change', {value,text});
    }
  }

组件开发

1. 传入值参数 navbars， value；
2. 定义 组件内部操作变量 status，并赋值 value；
3. watch 监听 value 和 status 的改变，value 改变对 status 重新赋值，status 改变通过【input】事件将改变值抛出；
4. 定义 changeNavbar 事件操作 status，同时自定义【change】事件，将value和text返回！

var ruiNavbar = {
  props: {
    navbars: {
      type: Array,
      default: []
    },
    value: {
      type: Number,
      default: 0
    }
  },
  data(){
    return {
      status: this.value
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        this.status = newVal;
      },
      deep: true,
      immediate: true
    },
    status(val){
      this.$emit('input', val);
    }
  },
  methods: {
    changeNavbar: function(value){
      this.status = value;
      var text = this.navbars[value];
      this.$emit('change', {value,text});
    }
  },
  template: `
    <div class="rui-navbar-content">
      <div :class="'rui-fg rui-flex-cc ' + (status == index ? 'rui-color6' : '')" @click="changeNavbar(index)" v-for="item,index in navbars" key="navbars">
        <span class="rui-navbar-title" v-html="item"></span>
      </div>
    </div>
  `
}
Vue.component('rui-navbar', ruiNavbar)

总结

1. v-model 双向绑定在组件的内部接收变量是 value；
2. v-model 双向绑定组件抛出值是【input】事件；
3. 【change】自定义事件依然可以实现数据双向绑定，只是操作比较繁琐，建议使用 v-model！