Day 23：儿子有事交给爸－$emit 传出事件

透过 Props 可以让子元件接收来自父元件的「资料」，相对地，父元件则可以接收来自子元件的「事件」，双方互相传递内容，最终可让子元件变成单纯处理画面样式的 pure component，而父元件则掌握所有控制权，再次以集中管理的方式让复杂程序的执行局限在父元件身上，同时也能加速除错时不用反覆查找资料出错的位置。

那麽就来尝试应用在解决新需求上，首先需要在页面内新增一个搜寻栏，不同於 Navbar 针对全站的关键字查询功能（预先假设），该搜寻栏位只会针对页面资料范围内的书本名称进行比对。

`vm.$emit( eventName, […args] )`：定义需要接收来自子元件的事件

先在子元件使用 v-on 监听事件，并定义好事件名称 searchBook 及所需传递的参数 $event，再将事件 $emit 传给父元件。

<div class="BookList">
    <h1>{{ navTitle }}</h1>
    <p>共计 {{ bookList.length }} 本书</p>
    <label>搜寻书本：
        <input
            type="text"
            :value="inputText"
            @input="$emit('searchBook', $event)" />
    </label>
    <div class="bookshelf">
        <!-- 略 -->
    </div>
</div>

input 需要显示的 value 值则再次透过 prop 取自於父元件传入的资料。

props: {
    inputText: {
        type: String,
        required: false,
    },
},

在父元件监听该事件名称 searchText，获得即时输入的结果为 $event.target.value，因为没有需要执行其他动作，因此直接在 <template> 将结果赋值给 inputText，让其透过 prop 传入子元件中的 input 显示出来。
```
<BookList
	navTitle="All"
	:bookList="books"
	:inputText="searchText"
	@searchBook="searchText = $event.target.value"
/>
```
接着可透过简单的正规表达式进行比对，从原本的 API 书单资料中筛选出符合搜寻栏位输入值的书本名称，books 阵列资料因此经过变动，而 inputText 则因为动态绑定而能同步更新资料再传入到子元件中。
```
computed: {
    books() {
        const regex = new RegExp(this.searchText, "gi");
        return this.$store.getters["allBooks"].filter((book) =>
            book.name.match(regex)
        );
    },
},
```