VUE 用v-model的双向绑定原理封装弹窗组件

置顶 qq_40055200

已于 2022-04-20 14:43:33 修改

阅读量1.4k

点赞数 4

文章标签： vue.js elementui javascript

于 2021-12-16 16:16:02 首次发布

本文链接：https://blog.csdn.net/qq_40055200/article/details/121977207

版权

习惯了用父子组件传值，也尝试下v-model吧~

第一种：使用v-model

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

// 父组件
<template>
  <div>
     <manage-dialog v-model="manageDialog"/>
   </div>
</template>
<script>
import manageDialog from './manageDialog'
export default {
  name: 'Manage',
  components: {
    manageDialog
  },
data(){
return {
manageDialog: false,    
    }
}
}
</script>

// 子组件
<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="manageDialog"
      width="600px"
      class="alarm-dialog"
      :close-on-click-modal="false"
      :before-close="handleClose">
      <div class="detail">
        <div class="detail-name">task_key</div>
        <div class="detail-content">622cdfe0-af40-31fd-a5ae-9b7ecb796b61</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ManageDialog',
  props: {
    manageDialog: {
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: 'manageDialog',
    event: 'close'
  },
  data() {
    return {
      title: '详情'
    }
  },
  methods: {
    handleClose() {
      this.$emit('close', false)
    }
  }
}
</script>

第二种：使用.sync修饰符

子组件通过this.$emit("update:show",false); 可以直接将父组件传过来的show值改变，从而达到显示隐藏的目的。

// 父组件
<template>
  <div>
    <manage-dialog :manageDialog.sync="manageDialog"/>
  </div>
</template>

<script>
import manageDialog from './manageDialog'
export default {
  name: 'Manage',
  components: {
    manageDialog
  },
}
</script>

// 子组件
<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="manageDialog"
      width="600px"
      class="alarm-dialog"
      :close-on-click-modal="false"
      :before-close="handleClose">
      <div class="detail">
        <div class="detail-name">task_key</div>
        <div class="detail-content">622cdfe0-af40-31fd-a5ae-9b7ecb796b61</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ManageDialog',
  props: {
    manageDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      title: '详情'
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:manageDialog', false)
    }
  }
}
</script>

<style scoped>

</style>