父组件操作子组件中的值,将父组件的值设置给子组件
原题:父组件搜索页面引用了子组件搜索框,当点击父组件中的热门搜索关键词的时候,将关键词写到子组件的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使用子组件的事件(方法)
一辈子很短,努力的做好两件事就好;第一件事是热爱生活,好好的去爱身边的人;第二件事是努力学习,在工作中取得不一样的成绩,实现自己的价值,而不是仅仅为了赚钱;