父组件操作子组件中的值,将父组件的值设置给子组件

原题:父组件搜索页面引用了子组件搜索框,当点击父组件中的热门搜索关键词的时候,将关键词写到子组件的input框中;

1.在组件中写事件,将得到的参数写到搜索框中:

1     setQuery(query){
2           this.query = query
3         }

2.父组件中写热门关键词的点击事件:

1   <span    @click="addQuery(item.k)"  class="host-span" v-for="(item,index) of  hotKey ">{{item.k}}</span>
1  addQuery(query){
2           this.$refs.searchBox.setQuery(query)
3         }

其中:searchBox指的是子组件的dom

1  <search-list  ref="searchBox"></search-list>

总结:父组件可以通过Dom使用子组件的事件(方法)

posted @ 2018-08-13 17:47  前端极客  阅读(2203)  评论(0编辑  收藏  举报