vue在组件中使用插槽,动态改变子组件数据

妖狐艹你老母 2023-02-19 08:29 13阅读 0赞

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

父页面：

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

这里定义一个按钮：

子组件：

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70][]

效果：

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

![20200619182603722.png][]

### 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>

子页面：

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

## ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200619182203475.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW,size_16,color_FFFFFF,t_70
[20200619182603722.png]: https://img-blog.csdnimg.cn/20200619182603722.png