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

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>

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

CSDN原文地址：https://blog.csdn.net/u014028392/article/details/88534181