vue slot插槽使用

-------------------------------------插槽模板-------model.vue------样式就自己写吧---------------------

<div class="modelCon" v-show="mdShow">
<div class="model">
<div class="pTxt">
<slot name="message"></slot>
</div>
<div slot="footer" class="dialog-footer">
<slot name="btnGroup"></slot>
</div>
</div>
</div>
------------------------------------------------------


-----------------使用方式--------cart.vue---------------
<div>
  <model :mdShow="delCarFlag">

    <p slot="message">确定要删除该条信息?</p> //插槽名字message一定要和组件中的名字一样
      <div slot="btnGroup"> //插槽名字brnGroup一定要和组件中的名字一样
           <el-button type="primary" @click="delCar">确 定</el-button>
   <el-button @click="cel">取 消</el-button>
  </div>
  </model>
</div>
<script>
  import model from '../components/model';//引入组件
  export default {
  name: "cart",
  data(){
   return {
   delCarFlag:false //具体什么时候改变为true 根据大家的方法自行设定就可以
   }
  },
     components:{
      model //注册组件
     }
  }
</script>

原文地址:https://www.cnblogs.com/hellosxs/p/11362655.html