vue框架将自己写的组件添加到主组件上

1.在主组件：

//这里是template，点击按钮弹框显示
<el-select v-model="selectedValue" filterable placeholder="请选择">
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<el-button @click="showParams = true">一键设置预警参数</el-button>

//使用组件
<warning-params-setting :visible.sync="showParams" :selectedValue="selectedValue"></warning-params-setting>
//script模块引入
import WarningParamsSetting from './warnning-params-setting'
//在data设置showParams
showParams: false,
//components注册
components: {
             AddOrUpdate,
             WarningParamsSetting,
                },
                

2.在弹窗组件

<!-- warning-params-setting.vue -->  
<template>  
  <el-dialog  
    :visible.sync="visible"  
    :width="dialogWidth"  
    @close="handleDialogClose"  
  >  
  //selectedValue是主组件传递过来的值，表示选择框选中的数据
    <div v-if="selectedValue === '固定设备'">  
      <!-- Option1 对应的弹窗内容 -->  
      <el-input v-model="inputValue1" placeholder="请输入固定设备参数"></el-input>  
    </div>  
    <div v-if="selectedValue === '移动保温箱'">  
      <!-- Option2 对应的弹窗内容 -->  
      <el-input v-model="inputValue2" placeholder="请输入移动保温箱参数"></el-input>  
    </div>  
        <div v-if="selectedValue === '特殊设备'">
          <!-- Option2 对应的弹窗内容 -->  
          <el-input v-model="inputValue2" placeholder="请输入特殊设备参数"></el-input>  
        </div> 
    <!-- 其他选项的弹窗内容 -->  
    <span slot="footer" class="dialog-footer">  
      <el-button @click="handleDialogClose">取消</el-button>  
      <el-button type="primary" @click="handleConfirm">确定</el-button>  
    </span>  
  </el-dialog>  
</template>  
  
<script>  
export default {  
  props: {  
    visible: {  
      type: Boolean,  
      default: false,  
    },  
    selectedValue: {  
      type: String,  
      default: '',  
    },  
    dialogWidth: {  
      type: String,  
      default: '50%',  
    },  
  },  
  data() {  
    return {  
      inputValue1: '',  
      inputValue2: '',  
    };  
  },  
  methods: {  
    handleDialogClose() {  
      this.$emit('update:visible', false);  
      // 清除输入值等其他逻辑  
    },  
    handleConfirm() {  
      this.$emit('confirm', {  
        selectedValue: this.selectedValue,  
        inputValue1: this.inputValue1,  
        inputValue2: this.inputValue2,  
      });  
      this.handleDialogClose();  
    },  
  },  
};  
</script>  
  
<style scoped>  
/* 样式 */  
</style>