通過對別的案例反復研究，終於總結出自己對於使用vue+iview創建組件的步驟：
第一步：編輯新建對話框組件
<template>
<div>
<!-- modalFlag自定義綁定名 -->
<Modal v-model="modalFlag" title="對話框組件" fullscreen footer-hide></Modal>
</div>
</template>
<script>
export default {
name: "Inspect",//命名組件，一般使用文件名，首字母大寫
data() {
return {
modalFlag: false//v-model綁定內容
};
},
props: {},//傳參使用
methods: {
showDialog() {
this.modalFlag = true;//打開的時候讓modalFlag為true
},
closeDialog() {
this.modalFlag = false;//關閉的時候讓modalFlag為false
}
},
mounted() {}
};
</script>
第二步：調用組件
<template>
<div>
<!-- 添加click點擊事件 -->
<Button type="primary" size="large" style="margin-right: 5px" @click="GoToUrl()">查看質檢詳情</Button>
<inspect ref="inspect"></inspect>
<!-- <組件名，調用組件，首字母小寫> -->
</div>
</template>
<script>
import inspect from "../views/Inspect";//import導入組件路徑
export default {
components: {//components組件名
inspect
},
data() {
return {};
},
methods: {
GoToUrl() {
this.$refs.inspect.showDialog();//實現組件的調用inspect為組件名，小寫
}
}
};
</script>
這是最簡單的對話框組件創建，調用，如果需要傳值，靜待后續更新咯。
————————————小白一枚，有錯請糾。