Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)


Posted in Javascript onSeptember 14, 2017

在git命令行下,执行以下命令完成环境的搭建:

1,npm install --global vue-cli 安装vue命令行工具

2,vue init webpack vue-demo 使用vue命令生成一个webpack项目,项目名称为vue-demo

Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)

3,cd vue-demo 切入项目

4,npm install安装package.json中的所有依赖包

5,npm run dev运行项目

一、父组件向子组件传递数据

然后删除默认的Hello.vue组件,把App.vue整理成以下样子:

<template>
 <div id="app">
 这是一个空的app
 </div>
</template>

<script>
 export default {
 name : 'app'
 }
</script>

<style>

</style>

把router下面index.js文件修改如下:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
 routes: [
 {
  path: '/',
 }
 ]
})

1、在components目录下创建一个子组件Child.vue

代码如下:

<template>
 <div>
  <h3>这是子组件</h3>
  <p>{{content}}</p>
 </div>
</template>
<script>
export default {
 props : ['content']
}
</script>

2、把App.vue的代码修改如下:

<template>
 <div id="app">
 <child :content="msg"></child>
 </div>
</template>

<script>
 import child from './components/Child.vue';
 export default {
 name : 'app',
 data(){
  return {
  'msg' : '这是来自父组件的问候'
  }
 },
 components : {
  child
 }
 }
</script>

这样就完成了父组件通过props属性向子组件传递数据

也可以用v-bind绑定属性

<template>
 <div id="app">
 <child :content="msg"></child>
 <child v-bind:content="msg"></child>
 </div>
</template>

小结:

子组件在props中创建一个属性,用以接收父组件传过来的值

父组件中调用子组件

在子组件标签中绑定子组件props中创建的属性

把需要传给子组件的值赋给该属性,如我们上文中父组件的msg

二、子组件向父组件传递数据

1,把Child.vue修改如下:

<template>
 <div>
  <h3>这是子组件</h3>
  <p>{{content}}</p>
  <p>
   <input type="button" value="告诉父王一个消息" v-on:click="send">
  </p>
 </div>
</template>
<script>
export default {
 props : ['content'],
 methods : {
  send(){
   this.$emit( 'ParentRecEv', "父王,孩儿正在跟ghostwu学习vue2.0" )
  }
 }
}
</script>

子组件通过$emit发送一个自定义的事件ParentRecEv, 后面参数是内容

2,App.vue修改如下

<template>
 <div id="app">
 <child :content="msg"></child>
 <child v-bind:content="msg" v-on:ParentRecEv="showMsg"></child>
 <p>{{data}}</p>
 </div>
</template>

<script>
 import child from './components/Child.vue';
 export default {
 name : 'app',
 data(){
  return {
  'msg' : '这是来自父组件的问候',
  data : ''
  }
 },
 methods : {
  showMsg( msg ){
  this.data = msg;
  }
 },
 components : {
  child
 }
 }
</script>

在第二个子组件监听事件ParentRecEv,当子组件点击按钮就会触发这个自定义事件,然后触发showMsg函数,就能收到子组件传递的数据,没有绑定自定义事件是不能收到子组件发送的信息的.

小结:

子组件中通过$emit触发一个自定义事件

将需要传的值作为$emit的第二个参数,该值会被父组件的方法接收到

在父组件中调用子组件并在子组件标签上绑定发送的自定义事件

他们的共同点就是有桥梁,子向父的桥梁是自定义事件$emit,父向子的桥梁是props中的属性. 这就是他们之间传递数据的关键

以上这篇Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JavaScript实现UrlEncode和UrlDecode的脚本代码
Jul 23 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
Apr 06 Javascript
22点关于jquery性能优化的建议
May 28 Javascript
使表格的标题列可左右拉伸jquery插件封装
Nov 24 Javascript
jQuery中andSelf()方法用法实例
Jan 08 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
Nov 24 Javascript
jQuery validate验证插件使用详解
May 11 Javascript
基于JS实现的随机数字抽签实例
Dec 08 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 Javascript
JavaScript图像放大镜效果实现方法详解
Jun 28 Javascript
对于js垃圾回收机制的理解
Sep 14 #Javascript
使用SVG基本操作API的实例讲解
Sep 14 #Javascript
JSON 数据格式详解
Sep 13 #Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 #Javascript
详解动画插件wow.js的使用方法
Sep 13 #Javascript
JS库之Highlight.js的用法详解
Sep 13 #Javascript
详解wow.js中各种特效对应的类名
Sep 13 #Javascript
You might like
PHP Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
PHP实现ftp上传文件示例
2014/08/21 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
offsetParent 算法分析
2010/04/05 Javascript
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
javascript中的数据类型检测方法详解
2019/08/07 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
学习python处理python编码问题
2011/03/13 Python
使用python实现rsa算法代码
2016/02/17 Python
python 通过 socket 发送文件的实例代码
2018/08/14 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
使用pandas库对csv文件进行筛选保存
2020/05/25 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
华为C++笔试题
2014/08/05 面试题
质检部岗位职责
2013/11/11 职场文书
酒店前台接待岗位职责
2013/12/03 职场文书
迟到早退检讨书
2014/02/10 职场文书
庆元旦迎新年广播稿
2014/02/18 职场文书
公司总经理岗位职责
2014/03/15 职场文书
静心口服夜广告词
2014/03/20 职场文书
企业厂务公开实施方案
2014/03/26 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
《曹冲称象》教学反思
2016/02/20 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫