vue在组件内实现对图标的显示与隐藏

在项目中需要在页面A调用页面B。页面B在页面A被调用时，肯定需要实现只读，禁用所有功能。因为页面B上的一个按钮是自己写的，没有disable功能，只能根据条件把他隐藏掉。

在使用时发现语句有问题，在所有页面上，图标都被隐藏了

// 错误代码：
v-if="this.$route.path.indexOf('fjdj') == '-1'"

后来才知道把在data中把this赋给一个值就可以了。因为插槽里的东西最终是插到组件里面的，到时候标签里的语句也是在组件里面执行，这个this就是组件了，所以要提前把路由页面的对象存下来。

v-if="vm.$route.path.indexOf('fjdj') == '-1'"

data () {
  return {
    vm: this,
  }
}

应用：

<Table  style="margin-top:5px;" class="TooltipTable" border max-height="400" :draggable="true" :columns="childTableColumns"  :data="childTableData" >
  <template slot-scope="{ row, index }" slot="action">
    <Tooltip :transfer="true" content="删除">
      <Icon size="20" type="md-trash" @click="canModify && deleteChildData(row, index)" v-if="vm.$route.path.indexOf('fjdj') == '-1'"  style="cursor:pointer"/>
    </Tooltip>
  </template>
</Table>