vue组件传值

1.子组件向父组件传值：

1. 子组件定义事件，使用this.$emit(事件名，需要传的值)
2. 父组件使用@事件名=事件名2拿到子组件定义的事件,无需传递参数
3. 父组件的methods中定义事件名2所需的操作，定义的函数形参为需要传递的值
   TodoTab：

      <span v-for="state in states"
                        :key="state"
                        :class="[filterstate === state ? 'active' : '']"
                        @click="toggleFilter(state)">{{state}}
      </span>
                  
                  
                  
      methods: {
                  toggleFilter(state) {
                      this.$emit('toggle',state)
                  },
              }
                  
                  
      Todo：
      <TodoTab v-if="todos.length > 0"
                       :todos="todos"
                       :filterstate="filterstate"
                       @toggle="toggleState"
              />
            
                           
      toggleState(state) {
                      this.filterstate = state
                 }
   

2 父组件向子组件传值：

1. 父组件的自定义组件上传递想要传递的值，若值随data的值而变动，则使用v-bind指令，否则使用正常写法
2. 子组件通过props拿到传递的值

       Todo：
        <TodoItem v-for="(todo,index) in todos"
                         :todo="todo" :key="todo.id"
                         @currentTodo="currentTodo"
                         @cancelCurrentTodo="cancelCurrentTodo"
                         :currentEditing="currentEditing"
                         @deleteOne="deleteOne(index)"/>

   TodoItem：
   props: {
               todo: {
                   types: Object,
                   required: true
               },
               currentEditing: {
                   required: true
               }
           },