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值相对应就会显示对应内容。