vue js中的slot的一般使用方法的坑[1]

vue js 中slot的一些坑

Vue Js中的Slot插槽跟平常的嵌入js完全不一樣,相當於我想要將B頁面嵌入到頁面A中，按照一般的邏輯，頁面B中的值和頁面A中的值是分離的。但是Vue這個東西，直接就把原本應該從頁面B中插入到頁面A中的內容直接寫在了頁面A上，頁面B中就只剩下了相關的<slot name="con_dkll_rate" :dkll="dkll"></slot> 這個代碼塊，整體感覺用“插槽”這個定義十分不合適。不僅複雜化了整個頁面，還不利於擴展，還不如直接使用父子傳參來的清晰。

頁面A的內容，父頁面

<template>
  <el-row :gutter="20" class="form">
    <el-form  label-width="200px"  size="medium"
    :rules="rules" :model="conInfoForm" ref="conInfoForm"
             label-position="right"
             :disabled=isconInfoForm>

 
    <div  >
      <el-col :span="12">
        <el-form-item label="客戶名稱:" prop="partyName" class="special-input">
          <el-input v-model="conInfoForm.partyName" style="width:100%" :disabled=true></el-input>
          <!--style="width:150px"-->
        </el-form-item>
      </el-col>
     
      
    </div>

    <conDkllRate >

       <div id="loanrate" slot="con_dkll_rate" slot-scope="props">

        <el-col :span="12">
            <el-form-item label="墊款日利率(萬分之):" prop="dkll" class="special-input">
            <el-input v-model="props.dkll" style="width:100%" ></el-input>
            
            </el-form-item>
        </el-col>
        </div>
    </conDkllRate>
    </el-form>

  </el-row>
</template>

<script>


  import conDkllRate from "@/views/biz/biz_product_detail/con_dkll_rate"

  export default {
    name: "conDetailHt",
    components: {
      //引入的組件
      conDkllRate
    },

      }

    },
    
    }
  }

</script>
<style scoped>
</style>

頁面B的內容，子頁面

<template>

<div>
<!--這是相關的數據的校驗和傳輸的通道slot-->
    <slot name="con_dkll_rate" :dkll="dkll"></slot> 
</div>

</template>


<script>



export default {
    name:'conDkllRate',
    components: {
 
    },
    props:{

    },
    data(){
       return{
           dkll:''

       }
    },
    created(){

        this.dkll="abcd";
    },

    methods: {


    }
    
};
</script>
<style scoped>

</style>

參考博客：
https://blog.csdn.net/xiao1215fei/article/details/84785375