javascript - 访问和过滤在 Vue.js 组件的 中定义的子组件

Question

我正在为我正在编写的 UI 库实现组合的选择下拉列表和搜索框组件，使用 Vue.js 来驱动交互，但我遇到了 Vue.js 似乎如何处理父子组件之间的通信。

基本上，我的目标是允许库的用户使用类似这样的东西在 HTML 中定义搜索选择元素:

<search-select>
    <search-option value="foo">Foo</search-option>
    <search-option value="bar">Bar</search-option>
    <search-option value="baz">Baz</search-option>
    <search-option value="foobar">Foobar</search-option>
</search-select>

我的 search-select 模板组件看起来像这样:

<template>
    <div class="search-select">
        <div class="placeholder" ref="placeholder"></div>
        <ul class="dropdown">
            <input
                type="text"
                placeholder="Type to filter..."
                v-on:input="updateFilter"
            >
            <slot></slot>
        </ul>
    </div>
</template>

想法是 search-select组件会在指定的inputs上面添加一个文本输入框，用户可以在里面输入内容来过滤可以选择的选项。完成的组件看起来像 this .

但是，根据我在文档中了解到的信息，Vue.js 没有提供任何直接方式让我从父组件中访问子组件的属性，也没有提供任何方式来监听 click。 parent 的 child 发生的事件或类似事件 <slot> .

这意味着我没有办法根据用户的输入过滤 child 的可见性，或者更新 search-select 的值当用户点击其中一个 child 时的组件。

Vue.js documentation提到了将事件从子组件传递给父组件的方法，但似乎都不适用于插槽中定义的元素 - 似乎父组件只能监听来自其中明确定义的组件的事件。

如何在不违反与组件间共享信​​息相关的任何 Vue.js 最佳实践的情况下，实现此用例所需的父子组件之间的双向通信类型？

Answer 1

您可以使用 event bus解决这个问题。只需让每个选项都监听输入事件，然后让它根据传递的参数决定是否隐藏自己。
参见 fiddle或下面的演示。

const bus = new Vue();

Vue.component('search-option', {
  template: `
    <option v-if="show" :value="this.$attrs.value"><slot></slot></option> 
  `,
  created() {
    bus.$on('filter', (input) => {
      this.show = this.$attrs.value.includes(input);
    });
  },
  beforeDestory() {
    bus.$off('filter');
  },
  data() {
    return {
      show: true,
    };
  },
});

Vue.component('search-select', {
  template: `
<div class="search-select">
    <div class="placeholder" ref="placeholder"></div>
    <ul class="dropdown">
        <input
            type="text"
            placeholder="Type to filter..."
            v-on:input="updateFilter"
            v-model="myinput"
        >
        <slot></slot>
    </ul>
</div>
  `,
  methods: {
    updateFilter() {
      console.log('update filter');
      bus.$emit('filter', this.myinput);
    },
  },
  data() {
    return {
        myinput: undefined,
    };
  },
});

Vue.component('parent', {
  template: `
<div class="parent">
<search-select>
    <search-option value="foo">Foo</search-option>
    <search-option value="bar">Bar</search-option>
    <search-option value="baz">Baz</search-option>
    <search-option value="foobar">Foobar</search-option>
</search-select>
</div>
  `,
});

new Vue({
  el: '#app',
})

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<div id="app">
  <parent></parent>
</div>