组件间需要能相互通信才价值, 通信包括数据的传递, 方法的调用. 这样才能将不同组件结合起来搭建页面
父组件传递数据给子组件
父组件通过 v-bind 将数据传给子组件, 子组件使用 props 接收数据
父子组件传值
具体代码 https://gitee.com/zhiqiexing/vue.js/blob/2a2fad33245529f30980cb2ecb3441dc3b9d6724/code/01/33.html
父子组件传值. gif
子组件调用父组件方法
父组件在调用子组件时通过 @func = 传递方法名, 子组件使用 $emit 调用父组件方法, 子组件可以将组件内的数据作为参数经由父组件的方法处理
子组件调用父组件方法
具体代码 https://gitee.com/zhiqiexing/vue.js/blob/2a2fad33245529f30980cb2ecb3441dc3b9d6724/code/01/33.html
子组件调用父组件方法. gif
案例: 评论列表
功能需求如下图:
评论组件. gif
将评论和显示分别封装成组件
评论组件:
- <!-- 评论组件 -->
- <template id="comment">
- <form action=""method="post"class="form-horizontal"role="form">
- <div class="form-group">
- <legend > 发表评论 </legend>
- </div>
- <div class="form-group">
- <label for="name" class="col-sm-2 control-label"> 名字 </label>
- <div class="col-sm-10">
- <input type="text" class="form-control" id="name" v-model="user" placeholder="请输入名字">
- </div>
- </div>
- <div class="form-group">
- <label for="content" class="col-sm-2 control-label"> 高见 </label>
- <div class="col-sm-10">
- <textarea class="form-control" id="content" v-model="content" rows="3" placeholder="敢问足下有何高见?"></textarea>
- </div>
- </div>
- <div class="form-group">
- <div class="col-sm-10 col-sm-offset-2">
- <button type="submit" class="btn btn-primary" @click.prevent="postComment"> 发表 </button>
- </div>
- </div>
- </form>
- </template>
显示组件:
- <!-- 显示列表组件 -->
- <template id="list">
- <ul class="list-group">
- <li v-for="(item, key) in list" :key="key" class="list-group-item">
- {{ item.user }}:{{ item.content }}
- </li>
- </ul>
- </template>
调用组件
- <div id="app">
- <comment @func="loadComments"></comment>
- <list v-bind:list="list"></list>
- </div>
发表评论
- postComment() {
- let comment = {
- user: this.user,
- content: this.content
- };
- let list = JSON.parse(localStorage.getItem('comment') || '[]');
- list.unshift(comment);
- localStorage.setItem('comment', JSON.stringify(list));
- this.user = this.content = '';
- this.$emit('func');
- }
具体代码 https://gitee.com/zhiqiexing/vue.js/blob/2a2fad33245529f30980cb2ecb3441dc3b9d6724/code/01/35.html
来源: http://www.jianshu.com/p/2eff211bc513