父元件

<template>
	<selectProduct @castProduct="getProductFn"></selectProduct>
</template>
<script>
    import selectProduct from './selectProduct';
    export default{
        components:{selecctProduct},
        data(){
            return{
                product:"",
            }
        },
        methods:{
           	getProductFn(val){
           		this.product = val.productName;
          	}
        }
    }
</script>

 

子元件

<template>
  <div class="selectProductEl">

    <el-input
      placeholder="請選擇產品"
      v-model="inputModel"
      @focus="focusInput">
    </el-input>

    <el-dialog title="修改協作人"
               width="600px"
               :visible.sync="isOpenDialog"
               :before-close="cancelDialogFn"
               :modal-append-to-body="false"
               append-to-body
               :close-on-click-modal="false">

      <div>
        <ul class="productListUl">
          <li v-for="(item,index) in productList" :key="item.id" @click="productInformation(item)">
            <div>{{item.productName}}-{{item.productCode}}</div>
          </li>
        </ul>
      </div>

      <div slot="footer" class="dialog-footer">
<!--        <el-button @click="affirmDialogFn" type="primary">確認</el-button>-->
        <el-button @click="cancelDialogFn">關 閉</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import getProduct from './getProduct.js';

  export default {
    name: "selectProduct",
    data(){
      return {
          /*input-model*/
        inputModel:"",
          /*產品列表*/
        productList:[],
          /*控制開啟dialog*/
        isOpenDialog:false,
      }
    },
    methods:{
      /* input獲取焦點 */
      focusInput(){
        this.isOpenDialog = true;
        getProduct.getProduct(this).then((data)=>{
          this.productList = data;
        });
      },
      /* 點選產品項-獲取資訊-拋給父元件-關閉 */
      productInformation(selectProduct){
        this.$emit('castProduct',selectProduct);
        this.inputModel = selectProduct.productName;
        this.isOpenDialog = false;
      },
      /* 關閉Dialog方法 */
      cancelDialogFn(){
        this.isOpenDialog = false;
      },
    }
  }
</script>

<style scoped>
  ul,ol{
    list-style: none;
  }
  .productListUl li{
    display: inline-block;
    margin: 10px 10px;
    padding: 5px;
    background-color: #8fd6ff;
    border: 1px solid #74adce;
    border-radius: 5px;
    cursor: pointer;
  }
  .productListUl li:hover{
    background-color: #bae5ff;
    border: 1px solid #74adce;
  }
</style>
 

子元件呼叫的js檔案

class GetProduct{
  async getProduct(vue) {
    let url = vue.HOME + "/productInfo/selectByCompanyIdAndPolicy";
    let listNow = [];
    await vue.$axios.post(url).then(resp => {
      if (resp.data.length > 0) {
        resp.data.forEach(function (v, i) {
          listNow[i] = {
            id: v.id || '',   /*產品id*/
            productCode: v.productCode || '', /*產品型號*/
            productName: v.productName || ''  /*產品名字*/
          }
        })
      }
    });
    return listNow;
  }
}

let getProduct = new GetProduct();
export default getProduct;