没写过文章,也没有打算成为博主的打算,只把自己的问题和解决办法做一个分享,欢迎指出不足和更优秀的解决办法。

使用 :.$nextTick()

父组件:

<template>
  <section>
    <el-container >
      <el-aside width="20%" style="background-color: rgb(255,255,255);margin-bottom:1%">
        <el-card class="box-card" style="margin-bottom:1%">
          <el-scrollbar>
          <div v-for="o in data" :key="o.id" class="text item" style="margin-bottom:1%">
            <el-button type="text" @click="showData(o.id)" >{{o.batch_name }}</el-button>
          </div>
      </el-aside>
      <el-main width="80%" style="margin-top: -1%">
          <!--放组件-->
        <percentags-tags ref="ref名称" v-if="show" :batchId="this.batchId">
</percentags-tags>
        <p v-else class="textShow index_main" >请先在左侧选择!</p>
      </el-main>
    </el-container>

  </section>
</template>

<script>
//导出子组件  @是定位到str.
import percentagsTags from "@/views/data";
export default {
//声明子组件
  components: {
    percentagsTags
  },
  name: "data",
  data() {
    return {
      show:false,
      batchId:'',
      data:[]
    }
  },

  methods: {
    
    showData(batchId){
      this.batchId = batchId,
      this.show = true
//我并不理解$nextTick()方法,同志们明白的话可以评论一下。在不加此方法前,子组件总是慢一步。
      this.$nextTick(() => {
        this.$refs.ref名称.子方法()
      })
    },
    $init() {
      //这里是获取data的方法,和本文无关。方法内容省略
       this.data = data
    },

  }
}
</script>

<style scoped>
.textShow{
  font-size:;
  color:;
  font-weight:;
}
.text {
  font-size: ;
}

.item {
  padding: ;
}

.box-card {
  width: ;
}
</style>

子组件:

<template>
    <section>
        <div class="index_main" >
         //中间代码不重要,个人业务实现。
        </div>
    </section>
</template>

<script>
    export default {
        name: "index",
        //接值
        props: {
          batchId: String
        },
        data() {
            return {
                //声明一个接值的方法,我个人喜欢吧传来的值给自己的值,不是去修改传来的值,
                businessId:'',
             
                data: {}
            }
        },
        methods: {
            子方法() {
              console.log(this.batchId)
              this.businessId=this.batchId
              /业务代码
            },
    }
</script>

<style scoped>

</style>

GitHub 加速计划 / vu / vue
106
18
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
9e887079 [skip ci] 1 年前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
Logo

新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐