# Vue组建化

![组建化思想](https://user-images.githubusercontent.com/39325949/63822191-25e1d780-c982-11e9-811b-264b4d1f3f10.png)

## 组件化构建思想

* main.js是程序入口
* app.js是程序的父组件，负责对数据进行处理同时将处理好的数据传递给子组件
* 各个子组件，收到数据后对视图进行渲染；但不能修改父组件的数据

![组件化思想](https://user-images.githubusercontent.com/39325949/63845891-52ffab80-c9bd-11e9-9dba-fbf1103da290.png)

## 对tomvc项目进行组件化

* **数据的展示**

  首先在子组件中定义好对应的属性用于接收父组件的数据，在子组件标签中显示的绑定对应的属性

  ```javascript
  <app-section 
      :todos="filterTodos"></app-section>
  //子组件中声明对应的属性
  exports.appSection={
          props:['todos','toggleAll']
  }
  ```
* **事件的响应**

  当子组件要对数据进行修改时，应该将需要修改的数据以及触发的动作通知父组件，从而在父组件层面对数据进行修改

  ```javascript
  //header 模板内容
      const header_template=`<header >        
              <h1 >todos</h1>
              <input class="new-todo"  placeholder="What needs to be done?"  v-model="newtodo" @keyup.enter="@keyup.enter="heanderNewtodo"" @blur="@keyup.enter="heanderNewtodo"" >
          </header>`

  //子组件中定义好新的数据变量，以及向上进行传递数据

   appheader={
          props:['todos'],
          data(){
              return({
                  newtodo:''
              })
          },
          template:header_template,
          methods:{
              heanderNewtodo(){
                  this.$emit('new-todos',this.newtodo) //传递数据给父组件
                  this.newtodo='' //将子组件输入框中内容清空
              }
          }
      }
  ```
* **监听子组件的事件修改父组件数据**

  ```javascript
  //模板内容
  <app-header @new-todos="handerNewTodos($event)"
      ></app-header>
  //事件的处理
          handerNewTodos(newtodo){
              var value=newtodo && newtodo.trim()
              if(!value){
                  return
              }
              this.todos.push({
                  id: this.todos.length ? this.todos[this.todos.length-1].id+1 : 1,
                  completed: false,
                  title:value
              })

          }
  ```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://zpliu.gitbook.io/booknote/vue/an-li-cao-zuo/04-todomvc-zu-jian-hua.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.