【Vue】利用v-model特性封装Dialog弹窗或可编辑窗口。

highlight: a11y-dark
theme: scrolls-light

简单介绍，Vue里面的v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。

v-model封装弹窗

父组件

<manage-dialog v-model="isVisible"/>
<div @click="isVisible=true"> 点我弹窗</div>

export default {
components: {
  manageDialog
  },
  data(){
    return{
      isVisible:false
    }
 }

}

子组件

  <el-dialog
      :visible.sync="isVisible"
      :before-close="handleClose"
   >
  
<script>
export default {
  model: {
    prop: 'isVisible',
    event: 'close'//这个要是close
  },
  
  props: {
    isVisible: {
      type: Boolean,
      default: false
    },
  },  
  methods: {
    handleClose() {
      this.$emit('close', false)
    }

  }

}
</script>

小结：

这个比较简单，需要注意的是子组件里的model允许一个自定义组件在使用 v-model 时定制 prop 和 event。官方文档里有写，一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突，所以上面的子组件里，我们用balabala来替换掉了原本的input事件，所以在$emit的时候，里面的事件名应为close，否则默认为input.

其实还有第二种方法，是需要使用.sync修饰符。子组件通过this.$emit(“update:show”,false);来操作的。这里就不过多介绍。

v-model封装可编辑表单

先看官网介绍=>
自定义事件可以用于开发支持 v-model 的自定义表单组件。回忆一下 v-model 在原生元素上的用法：

<input v-model="searchText" />

上面的代码其实等价于下面这段 (编译器会对 v-model 进行展开)：

<input
  :value="searchText"
  @input="searchText = $event.target.value"
/>

父组件

<template>
  <home-child v-model="vModelData"></home-child>
</template>

<script>
import HomeChild from './child/HomeChild.vue'
export default {
  name: 'Home',
  components: {
    HomeChild
  },
  data () {
    return {
      vModelData: 'hello v-model'
    }
  }
}
</script>

子组件

<template>
  <div class="box">
    <span>{{ value }}</span>
    <button @click="testVModel">测试v-model</button>
  </div>
</template>

<script>
export default {
  name: 'HomeChild',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  methods: {
    testVModel () {
      this.$emit('input', '我是子组件')
    }
  }
}
</script>

用 model 选项的 组件使用 v-model

父组件

<template>
  <div class="home">
    <h3>输入的实时内容：{{ myValue }}</h3>
    <custom-model v-model="myValue"></custom-model>
  </div>
</template>
<script>
import CustomModel from './CustomModel'
export default {
  name: 'Home',
  components: {
    CustomModel,
  },
  data () {
    return {
      myValue: ''
    }
  },
}
</script>
复制代码

子组件

<template>
  <!-- 自定义组件中使用v-mode指令 -->
  <input type="search" @input="changeInput" data-myValue="">
</template>

<script>
export default {
  name: 'CustomModel',
  // 当我们使用model的默认值的时候value作prop，input作event时，可以省略不写model。
  model: {
    prop: 'myValue', // 默认是value
    event: 'myInput', // 默认是input
  },
  props: {
    // 接收string和number类型的值，
    // 注意不能是写成字符串["String","Number"],因为此时它们是构造器，是全局变量
    myValue: [String, Number],
  },
  methods: {
    changeInput ($event) {
      // 向上派发myInput事件，这样model监听myInput才有意义：当输入字符时触发input事件，
      // 进而派发触发自定义的myInput事件，然后model监听myInput，就实现了数据绑定
      this.$emit('myInput', $event.target.value)
    },
  }
}
</script>