将变量值从子组件传递给父组件

时间:2017-01-05 11:58:56

标签: javascript vue.js vue-component

如何将v模型的值从另一个组件内的组件传递给其父组件?我在表单组件中创建了一个小型的typeahead组件,现在我正试图将查询模型放到公司模型中。

<modal-client-add inline-template>
    <div class="modal-mask" id="add-client" v-if="showModal" @close="showModal = false" tabindex="-1" role="dialog">
        <div class="modal-wrapper">
            <div class="modal-container">
                <form method="POST" action="/clients" accept-charset="UTF-8" enctype="multipart/form-data" _lpchecked="1" @submit.prevent="onSubmit">
                <div class="modal-header">
                    <button type="button" class="pull-right" @click="closeModal">×</button>
                    <h4 class="modal-title">Add Client</h4>
                </div>
                <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                            
                            
                                <keevo-typeahead inline-template>
                                    <div class="form-group typeahead-wrapper">
                                        <label for="company"></label>
                                        <input name="company" class="form-control" autocomplete="off"
                                               v-model="query"
                                               :class="{ loading: isLoading }"
                                               @input="update" />
                                        <ul class="typeahead" v-if="show" >
                                            <li v-for="result in results" @click="select" v-html="result.name"></li>
                                        </ul>
                                    </div>
                                </keevo-typeahead>
                                
                                
                            </div>
                            
                          <div class="modal-footer">
                              <button class="btn btn-default" @click.prevent="closeModal">Close</button>
                             <button type="submit">
                             Submit
                             </button>
                          </div>
                        
                      </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</modal-client-add>

感谢您的任何建议!

1 个答案:

答案 0 :(得分:1)

  1. 在孩子中发出一个事件:`this。$ emit('myevent',yourVariable)
  2. 处理父项中的事件:`
  3. eventHandlerFunction
  4. 中使用您出现的数据