Vue3 封装 Element Plus 的 El-tree-select 双向绑定组件 (组合式 API)

<template>
  <el-tree-select
    v-bind="$attrs"
    v-model:value="modelValue"
    :data="data"
    :props="defaultProps"
    @input="updateValue"
  />
</template>
<script>
import { ref, watch } from 'vue';
import { ElTreeSelect } from 'element-plus';

export default {
  components: {
    ElTreeSelect
  },
  props: {
    modelValue: {
      type: [String, Number, Array],
      default: ''
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  setup(props, { emit }) {
    const model = ref(props.modelValue);

    // 监听 modelValue 的变化，更新 model
    watch(
      () => props.modelValue,
      (val) => {
        model.value = val;
      }
    );

    // 更新 model 的值，并通过 emit 触发 input 事件更新父组件的值
    const updateValue = (val) => {
      model.value = val;
      emit('update:modelValue', val);
    };

    // 定义默认 props
    const defaultProps = {
      label: 'label',
      value: 'value',
      children: 'children'
    };

    return {
      modelValue: model.value,
      updateValue,
      defaultProps
    };
  }
};
</script>
<p>在上面的例子中，我们使用了<code>ref</code>来创建一个响应式的<code>model</code>变量，并监听外部传入的<code>modelValue</code>的变化，将其赋值给<code>model</code>。同时，我们在<code>updateValue</code>方法中更新<code>model</code>的值，并通过<code>emit</code>触发<code>update:modelValue</code>事件，以便将新的值传递给父组件。</p>
<p>在模板中，我们使用了<code>v-bind=&quot;$attrs&quot;</code>来将父组件传递的所有属性绑定到<code>el-tree-select</code>组件上，这样可以让我们的封装组件更加灵活。同时，我们使用<code>v-model:value</code>来实现双向绑定，将<code>modelValue</code>作为<code>el-tree-select</code>的<code>value</code>属性，并通过<code>@input</code>事件监听选择的变化。</p>
<p>最后，我们将封装的组件导出，以便在其他地方使用。</p>
<p>使用示例：</p>
<pre><code class="language-vue">&lt;template&gt;
  &lt;TreeSelect v-model=&quot;selectedValue&quot; :data=&quot;treeData&quot; /&gt;
&lt;/template&gt;

&lt;script&gt;
import TreeSelect from './TreeSelect.vue';

export default {
  components: {
    TreeSelect
  },
  data() {
    return {
      selectedValue: '',
      treeData: [
        {
          label: 'Node 1',
          value: '1',
          children: [
            {
              label: 'Child 1-1',
              value: '1-1'
            },
            {
              label: 'Child 1-2',
              value: '1-2'
            }
          ]
        },
        {
          label: 'Node 2',
          value: '2'
        }
      ]
    };
  }
};
&lt;/script&gt;
</code></pre>
<p>在上面的示例中，我们使用了封装的<code>TreeSelect</code>组件，并将<code>v-model</code>绑定到<code>selectedValue</code>上，实现了双向绑定。同时，我们传递了一个<code>treeData</code>数组作为数据源。</p>
<p>希望对你有帮助！</p>