vue-自定义表单控件

题引

开发中有遇到一些非传统表单元素，如选择地址组件，开发人员需要将用户选择的最终结果转换成后台指定的格式和其他表单元素
一起提交给后台，这时候，如果能像传统表单元素，如input，radio这些直接使用v-model双向绑定，那样就方便很多。

v-model 是一个语法糖，可以拆解为 props: value 和 events: input。就是说组件必须提供一个名为 value 的 prop，以及名为 input 的自定义事件，满足这两个条件，使用者就能在自定义组件上使用 v-model

demo

演示的表单控件是这样的：自定义一些列参数名和参数值，v-model 绑定的数据格式是 json 对象{参数名：参数值, …},页面中通过 + ，- 来控制参数的个数


打印v-model绑定的变量的值

同样，也可以将相同格式初始值渲染进去

子组件代码

template代码

      

          
          =
               
          -
          +
      
         
  

定义初始变量：paramsList

paramsList: [{
            name: "",
            value: "",
        }]

props参数

value: {
          type: Object,
          default: null
      }

methods方法：
init: 渲染初始值

init() {
   if (this.value && JSON.stringify(this.value)!=="{}") {
        this.paramsList = []
        for (let key in this.value){
            this.paramsList.push({
                name: key,
                value: this.value[key],       
            })
        }  
    } else {
        this.paramsList =  [{
            name: "",
            value: "",
        }]
    }
},

valueTransform：将结果数据转化成value指定的格式并返回

valueTransform() {
  let result = {}
    this.paramsList.map(val => {
        result[val.name] = val.value
    })
    return result
},

handleDelParams：删除一行参数

 handleDelParams(index) {
    this.paramsList.splice(index, 1);
 },

handleAddParams：添加一行参数

handleAddParams() {
     this.paramsList.push({
         name: "",
         value: "",
     })
 }

handLeInput: 监听用户输入值并并派发给父组件

• props 一般不能在组件内修改，它是通过父级修改的，初始时从 value 获取一次值，当 value 修改时，也通过 watch 监听到及时更新；组件不会修改 value 的值，而是修改paramsList（当前值），同时将修改的值通过自定义事件 input 派发给父组件，父组件接收到后，由父组件修改 value。

handLeInput(){
    this.$emit('input', this.valueTransform());
 }

监听值props中value变量并重现渲染value值

• 当用watch来进行变量监听时可以用deep：true来进行深度监听；
  immediate是用来确定是否立即执行方法的（初始化时第一次拿到value值时就执行）

watch: {
       value: {
        handler() {
            this.init()
        },
        deep: true,
        immediate:true,
      }
    },

父组件代码

import引入这个CustomParams组件并使用

小记

npm install @vue/[email protected] -g

(3.x版本创建命令vue create 名称，2.x版本创建命令vue init webpack 名称)

tips:如果你不想用 value 和 input 这两个名字，从 Vue.js 2.2.0 版本开始，提供了一个 model 的选项，(在子组件中位置和props同级),如以下配置将value替换成newValue，emit事件中input替换成change

 model: {
      prop: 'newValue',
      event: 'change'
    },

分享：git地址