1）使用<slot></slot>标签

父页面：

如下，在父组件页面引入子组件，然后在子组件里面写上你要展示的内容。

这里定义一个按钮：

     <Child> 
      <template>
        <div class="openButton" @click="toRecharge">
          <span>充值</span>
        </div>
      </template>
    </Child>
  </div>
 

子组件：

直接用这个<slot></slot>标签

效果：

子组件就会出现你刚才在父组件中的子组件里面定义的按钮。

 

2）使用<slot></slot>标签的v-slot属性，动态添加我们的子组件里面数据

父页面

 <accountshows>
      <template v-slot:imgs>
        <img src="../../assets/images/VIPMember/headportrait1.png" />
      </template>
      <template v-slot:aa>
        <div>{{accountName}}【{{equipment}}】</div>
      </template>
      <template v-slot:bb>
        <div>{{NovipMember}}</div>
      </template>
    </accountshows>

子页面：

<template>
  <div id="account-warp">
    <div class="account-content">
      <div class="account-image">     
        <slot name="imgs"></slot>
      </div>
      <div class="account-txt">   
          <slot name="aa"></slot>
      </div>
      <div class="account-txt2">    
          <slot name="bb"></slot>
      </div>
    </div>
  </div>
</template>

 其实就是，你在父组件的子组件里面定义的v-slot名称是什么，只要你在子页面的name值相对应就会显示对应内容。