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 相关文章推荐
prototype 1.5相关知识及他人笔记
Dec 16 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
Aug 21 Javascript
原生js和jQuery写的网页选项卡特效对比
Apr 27 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 Javascript
初识angular框架后的所思所想
Feb 19 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
Vue自定义指令写法与个人理解
Feb 09 Javascript
js实现div色块拖动录制
Jan 16 Javascript
ECharts transform数据转换和dataZoom在项目中使用
Dec 24 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写的小东西
2006/12/06 PHP
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
使用php判断网页是否gzip压缩
2013/06/25 PHP
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
文本链接逐个出现的js脚本
2007/12/12 Javascript
javascript 强制刷新页面的实现代码
2009/12/13 Javascript
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
jQuery图片预加载 等比缩放实现代码
2011/10/04 Javascript
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
JavaScript中各数制转换全面总结
2017/08/21 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
vue axios重复点击取消上一次请求封装的方法
2019/06/19 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
Python Web服务器Tornado使用小结
2014/05/06 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
python版学生管理系统
2018/01/10 Python
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2018/03/19 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
python游戏开发的五个案例分享
2020/03/09 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
Pytorch使用PIL和Numpy将单张图片转为Pytorch张量方式
2020/05/25 Python
python openCV自制绘画板
2020/10/27 Python
纯css3实现图片翻牌特效
2015/03/10 HTML / CSS
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
阿里巴巴的Oracle DBA笔试题答案-SQL tuning类
2016/04/03 面试题
override和overload的区别
2016/03/09 面试题
企业办公室主任岗位职责
2014/02/19 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
员工工作能力评语
2014/12/31 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers