vue.js组件间通信

组件间需要能相互通信才价值,通信包括数据的传递,方法的调用。这样才能将不同组件结合起来搭建页面

父组件传递数据给子组件

父组件通过v-bind将数据传给子组件,子组件使用props接收数据

父子组件传值

具体代码

父子组件传值.gif

子组件调用父组件方法

父组件在调用子组件时通过@func=传递方法名,子组件使用$emit调用父组件方法,子组件可以将组件内的数据作为参数经由父组件的方法处理

子组件调用父组件方法

具体代码

子组件调用父组件方法.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');
}

具体代码

更多vue.js的有趣实例,请点击移步至目录

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,018评论 3 119
  • IOS项目最近刚配置好这个https,总结一下大概流程和方法。 配置Https: (一)准备证书 .cer (后...
    禾子_____阅读 1,374评论 0 10
  • 1.她砰地关上门,一声不吭地走了,他们之间那场争执就此结束。 Their argument ended when ...
    沐芓阅读 601评论 0 0
  • 姓名:黄淑宜 公司:珠海三环知识产权 2017年10月 24日打卡 第292A期乐观三组 日精进打卡第48天 【知...
    淑宜阅读 194评论 0 0