父组件子组件值传递遇到的问题

封装的下拉框不显示id对应的label值
点击编辑，修改页面获取到id值，并且与下拉框对应的id值相同

<el-form-item label="适用烟:" style="width:300px;">
        <tree-select
          v-model="comboSchemeOrder.tobaccoTypeId"
          :checkOnClickNode="false"
          :options="brandList"
          width="150"
        />
 </el-form-item>

created() {
   
    pubApi.brandListTree().then(res => {
   
        this.brandList = res.data;
      });
  },

于是查看是否是封装的treeSelect问题
分别在父组件打印brandlist，在子组件的created中打印接收的options

输出的顺序是options，brandlist，并且options为空。

所以要在获取options值之后再执行查找id对应label操作,即

子组件监听数据渲染完后执行某函数、watch监听prop中的属性有值后再执行、prop中属性值不为空

nextTick：在下次 DOM 更新循环结束之后执行延迟回调

watch：用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。

子组件修改如下

 watch: {
    options() {
      // 子组件监听数据渲染完后执行
      this.setLabel();
    },
    methods: {
        setLabel() {
          this.$nextTick(()=>{
          // 检测输入框原有值并显示对应 label
          if (this.value) {
            this.valueModel = this.value;
            this.labelModel = this.queryTree(this.data, this.value);
          }
          })     
        },
    }

树形下拉框组件完整代码如下：

<!--
  树形下拉选择插件，
  defaultExpandedKeys：默认展开的节点
  defaultExpandedLevel：默认展开层级
  defaultExpandedKeys更高
-->
<!--禁止搜索-->
<!--:readonly="!filterable"-->
<!-- 树状选择器 -->
<template>
  <el-dropdown trigger="click" class="tree-select" @visible-change="onVisibleChange">
    <el-input
      ref="input"
      v-model="labelModel"
      :placeholder="placeholder"
      :clearable="!filterable"
      :disabled="disabled"
      suffix-icon="el-icon-arrow-down"
      :class="{ 'rotate': showStatus }"
      :style="`width:${
      width || 200}px`"
      @input="onFilter"
      @clear="clear()"
      @blur="UpdateTaskName($event)"
    />
    <el-dropdown-menu slot="dropdown">
      <el-tree
        v-show="!disabled"
        ref="tree"
        :style="`min-width: ${
      treeWidth}; max-height:${
      treeHeight}`"
        :props="props"
        :node-key="props.key"
        :data="data"
        :show-checkbox="showCheckbox"
        :default-expanded-keys="expandedKeys"
        :default-checked-keys="checkedKeys"
        :filter-node-method="filterNode"
        @node-click="onClickNode"
        @check="onCheckChange"
        :check-on-click-node="checkOnClickNode"
        :expand-on-click-node="expandOnClickNode"
      ></el-tree>
    </el-dropdown-menu>