vue 自定义弹窗组件

父组件

<template>
	<div>
    <p  @click="onDelete">
       打开
     </p>
    <!-- 弹框 -->
    <code-dialog
      :status.sync="deleteDialogStatus"
    />
  </div>
</template>
<script>
import codeDialog from "./code";
export default {
components: {
    codeDialog
  },
  name: "detailsDialog",
  data() {
    return {
      deleteDialogStatus: false
    };
  },
  methods: {
    onDelete() {
      this.deleteDialogStatus = true;
    }
};
</script>

弹窗组件具体可以根据业务需求

<template>
  <div>
    <el-dialog
      title=""
      :visible.sync="show"
      :center="true"
      :show-close="false"
      :close-on-click-modal="true"
      class="deletes"
    >
    
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "codeDialog",
  data() {
    return {
      show:false
    };
  },
  props: ["status"]
  watch:{
    status(val) {
      this.show = val;
    },
    show(val) {
      this.$emit("update:status", val);
    }
  }
};
</script>

Vue组件上使用v-model （已查询为例）

1.常规操作

父组件
<template>
    <div>
        <search @test="getData"></search>
        <button @click="submit">提交</button>
    </div>
</template>
<script>
import search from '@/components/index/search.vue'
export default {
    data() {
        return {
            keywords: ''
        }
    },
    components: {
        search
    },
    methods: {
        getData(val){
            this.keywords = val
        },
        submit() {
            console.log('keywords:', this.keywords)
        }
    }
}
</script>


子组件
<template>
    <div>
        <input @input="inputChange" type="text" name="keywords">
    </div>
</template>
<script>
export default {
    props: ['keywords'],
    methods: {
        inputChange(e) {
            this.$emit('test', e.target.value)
        }
    }
}
</script>

2.v-model用法

如果想在一个自定义的Input组件上使用v-model，
那么就要在子组件，介绍一个value，和触发input事件，
v-model的默认语法糖就是这两个东西的组合。
//v-model这个双向绑定相当于做了两个操作：
//（1）给当前这个组件添加了一个value属性
//（2）给当前这个组件绑定了一个input事件
<template>
    <div>
        <search v-model="keywords"></search>
        <button @click="submit">提交</button>
    </div>
</template>
<script>
import search from '@/components/index/search.vue'
export default {
    data() {
        return {
            keywords: ''
        }
    },
    components: {
        search
    },
    methods: {
        submit() {
            console.log('keywords:', this.keywords)
        }
    }
}
</script>

//子组件
<template>
    <div>
        <input :value="value" 
        @input="$emit('input', $event.target.value)" 
        type="text" 
        name="keywords">
    </div>
</template>
<script>
export default {
    props: ['value']
}
</script>