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 相关文章推荐
jquery.jstree 增加节点的双击事件代码
Jul 27 Javascript
JS 获取滚动条高度示例代码
Oct 24 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 Javascript
jquery链式操作的正确使用方法
Jan 06 Javascript
jQuery实现购物车多物品数量的加减+总价计算
Jun 06 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
Sep 27 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 Javascript
angular1配合gulp和bower的使用教程
Jan 19 Javascript
解决layui 表单元素radio不显示渲染的问题
Sep 04 Javascript
通过实例解析javascript Date对象属性及方法
Nov 04 Javascript
微信小程序实现录音Record功能
May 09 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循环获取GET和POST值的代码
2008/04/09 PHP
php file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
PHP获取http请求的头信息实现步骤
2012/12/16 PHP
php 模拟POST提交的2种方法详解
2013/06/17 PHP
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
基于jquery的Repeater实现代码
2010/07/17 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
2017/03/08 Javascript
微信小程序实现图片上传功能
2018/05/28 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
React中this丢失的四种解决方法
2019/03/12 Javascript
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
JavaScript实现随机点名程序
2020/03/25 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
python 中的列表解析和生成表达式
2011/03/10 Python
python如何实现反向迭代
2018/03/20 Python
浅析Python 实现一个自动化翻译和替换的工具
2019/04/14 Python
python五子棋游戏的设计与实现
2019/06/18 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
介绍一下linux文件系统分配策略
2013/02/25 面试题
什么是封装
2013/03/26 面试题
优秀求职信范文分享
2013/12/19 职场文书
二手车转让协议书
2015/01/29 职场文书
护理工作心得体会
2016/01/22 职场文书
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python
DSP接收机前端设想
2022/04/05 无线电