vue在子组件中调用接口、点击按钮弹出窗口显示内容

前段时间刚总结完父子组件传值的问题，详情可看这篇文章，介绍的很详细了。vue父子组件传值_芝士焗红薯的博客-CSDN博客_父子组件传值

当时还说，下次更新可能是发现子组件真的可以传值。结果今天真的有后续了！新要求是在子组件的一个表格里加一个按钮，点击按钮显示那个表格里的内容。

其实很简单啊，给那个单元格加个slot，然后给slot加个按钮，写个弹窗，把值赋过去就可以了。

按道理来说，可以直接用row.xxx赋值，但是不知道为什么，这样赋值的话，按钮根本就点不开，我不理解。(想了一下，应该还是父子组件渲染的问题，子组件在父组件之前渲染，直接写row.xxx会被误会成父组件的row)

当时以为又是父子组件渲染的问题，之后就想复杂了很多很多。在之前父子组件那个文章里我也说过，发现如果在子组件写方法，子组件的方法会在页面加载完成之前就被调用，所以可以说子组件是在父组件之前渲染完成的。今天发现问题的时候又去查了一下资料，发现果然。

vue 父子组件周期：
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted。

在这种情况下，如果我们需要在子组件调用接口，就需要使用v-if。在子组件条件渲染，让子组件在有数据的情况下再开始渲染，就可以在子组件调用接口了。除此之外还需要监听一下，有变化了再赋值给data，渲染的时候使用data里的数据，保证数据的动态更新。(这种刚才试了一下，不知道为什么一直不行，不想搞了)

还可以存在vuex里。（感觉这种比较方便，vuex果然yyds）

这两个方法是后来才看到的，最开始越急越想不出来，七七八八试了很多方法，因为不知道子组件可以调用接口，所以想到这个按钮的内容还需要父组件传过去，但是每行按钮的内容又是不一样的balabala。

扫描二维码关注公众号，回复： 14848399 查看本文章

睡了午觉起来，下午醒了发现这个功能，父组件传过去真的不太现实，就重新回到最简单的方法，直接赋值，写了个data全局变量，把row.xxx赋给这个全局变量，内容就显示出来了...

slot插槽

<!--年度小结-->
<div>
  <p style="font-weight: bold;margin-top: 20px;margin-bottom: 5px;">年度小结</p>
  <Table stripe  border ref="selection"  :columns="ndxjColumns"  :data="ndxjTable">
    <template slot-scope="{ row, index }" slot="content">
      <Button type="primary" ghost size="small" @click="getContent(row, index)">查看</Button>
    </template>
  </Table>
</div>

modal弹框（我用的组件是iview）

<Modal
  v-model="contentModal"
  title="年度小结"
  :mask-closable="false"
  :scrollable="true"
  :transfer="false"
  width="1000"
  :styles="{height: '300px'}"
  :footer-hide="true"
  >
    <Input v-model="content" type="textarea" :autosize="true" placeholder="请输入内容" />
</Modal>

data里面定义content，contentModal，表格里的slot也要定义

data () {
  return {
    contentModal: false, // 详情modal
    content:'',
    // 年度小结
    ndxjColumns: [

      {
        title: '年度',
        resizable: true,
        align: 'center',
        width:150,
        name: 'time',
        tooltip: true,
        key: 'time'
      },
      {
        title: '小结',
        resizable: true,
        align: 'center',
        name: 'content',
        tooltip: true,
        slot: 'content'
      }
    ],
  }
}

获取content

// 获取详细信息
getContent (row) {
  this.contentModal = true
  this.content = row.content
}

效果：

vue在子组件中调用接口、点击按钮弹出窗口显示内容

猜你喜欢