Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题

首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学请自行百度哦)

环境搭建步骤:

  • 打开git ,运行 npm install --global vue-cli 这是安装vue的命令行
  • vue init webpack vue-demo 这是vue基于webpack的模板项目
  • cd vue-demo 进入vue-demo文件夹
  • npm install 安装package.json中依赖的node_modules
  • npm run dev 运行该项目
刚刚我们创建的是vue基于webpack工具的一个模板项目,对于webpack和热加载这些不熟悉的同学不必在意,我们现在不会过多关注webpack的,不过建议对vue有兴趣的同学还是去了解一下webpack,它也算是vue开发中的一个必备工具

接着我们进入Demo,首先我们可以删除掉模板项目中src/components/Hello.vue,然后在App.vue中删除对于Hello子组件的注册和使用还有一些其他无关紧要的东西,此时的App.vue应为这样

App.png
一.父组件向子组件传值

1.创建子组件,在src/components/文件夹下新建一个Child.vue
2.Child.vue的中创建props,然后创建一个名为message的属性

child.png

3.在App.vue中注册Child组件,并在template中加入child标签,标签中添加message属性并赋值

App2.png

4.保存修改的文件,查看浏览器

browser.png

5.我们依然可以对message的值进行v-bind动态绑定

App3.png

此时浏览器中

browser2.png

父组件向子组件传值成功
总结一下:

  • 子组件在props中创建一个属性,用以接收父组件传过来的值
  • 父组件中注册子组件
  • 在子组件标签中添加子组件props中创建的属性
  • 把需要传给子组件的值赋给该属性

二.子组件向父组件传值

1.在子组件中创建一个按钮,给按钮绑定一个点击事件

Child2.png

2.在响应该点击事件的函数中使用$emit来触发一个自定义事件,并传递一个参数

Child3.png

3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

App4.png

4.保存修改的文件,在浏览器中点击按钮

browser3.png

子组件向父组件传值成功
总结一下:

  • 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
  • 将需要传的值作为$emit的第二个参数,该值将作为实参传给响应自定义事件的方法
  • 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
在通信中,无论是子组件向父组件传值还是父组件向子组件传值,他们都有一个共同点就是有中间介质,子向父的介质是自定义事件,父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了

Vue的父子组件通信(转载)的更多相关文章

  1. Vue 非父子组件通信方案

    Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...

  2. Vue 非父子组件通信

    组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...

  3. vue.js父子组件通信动态绑定

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. vue(三)-父子组件通信

    原因 :  Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. props  父组件给子组件传递数据 props:作用是父组件给 ...

  5. 详解Vue 非父子组件通信方法(非Vuex)

    假设 bb 组件里面有个按钮,点击按钮,把 123 传递给 aa 组件 // 根组件(this.$root) new Vue({ el: '#app', router, render: h => ...

  6. 用Vue的父子组件通信实现todolist的功能

    先上代码 <body> <div id="root"> <div> <input v-model="inputValue&quo ...

  7. vue之父子组件通信

    一. 父-子组件间通信 let children={    template:`<div><h1>{{send}}</h1></div>`,  # 将传 ...

  8. vue组件通信之父子组件通信

    准备工作: 首先,新建一个项目,如果这里有不会的同学,可以参考我转载过的文章 http://www.cnblogs.com/Sky-Ice/p/8875958.html  vue 脚手架安装及新建项目 ...

  9. vue父子组件及非父子组件通信

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...

随机推荐

  1. MHA ssh检查,repl复制检查和在线切换日志分析

    一.SSh 检查日志分析 执行过程及对应的日志: 1.读取MHA manger 节点上的配置文件 2.根据配置文件,得到各个主机的信息,逐一进行SSH检查 3.每个主机都通过SSH连接除了自己以外的其 ...

  2. linux把用户添加到组

    使用 usermod 命令 将现有的用户添加到多个次要组或附加组 # usermod -a -G GroupName UserName id 命令查看输出 # id UserName 用户添加到多个次 ...

  3. 解决deepin没有ll等命令的办法

    编辑~/.bashrc, 添加alias 如下 vim ~/.bashrc 设置别名. 添加如下行 alias ll='ls -alF' alias la='ls -A' alias vi='vim' ...

  4. Librepilot-Spark2固件的烧写

    1.通过USB连接Librepilot_Spark2飞控,启动Librepilot GCS地面站(博主的GCS是16.09版本),界面如下. 2.点击Firmware标签页,点击终止系统(若板子未带系 ...

  5. 机器学习聚类算法之K-means

    一.概念 K-means是一种典型的聚类算法,它是基于距离的,是一种无监督的机器学习算法. K-means需要提前设置聚类数量,我们称之为簇,还要为之设置初始质心. 缺点: 1.循环计算点到质心的距离 ...

  6. 解决bootstrap下的图片自适应问题

    .img-responsive { display: block; height: auto; max-width: 100%; }

  7. 十三、S3C2440 裸机 — 初始化代码及MMU

    13.1 NOR FLASH 搬运 把程序从 nor flash 上搬运到 SDRAM 中 程序存储在 nor flash 上,运行时将程序搬运到 SDRAM 中运行 nor flash 启动:nor ...

  8. Spring的DI和AOP

    Spring 为了降低Java开发的复杂性,Spring采取了以下4种关键策略:* 基于POJO的轻量级和最小入侵性编程:* 通过依赖注入和面向接口实现松耦合:* 基于切面和惯例进行声明式编程:* 通 ...

  9. Lambda学习总结(一)--函数式接口

    Lambda 表达式是 JDK 1.8 里面的一个重要更新,这意味着 Java 也开始承认了函数式编程,并且尝试引入其中,我们今天就来了解下它的使用. 一.函数式接口 1.1 概念 函数式接口在 Ja ...

  10. 在CentOS 6.4上安装Puppet配置管理工具

    在CentOS 6.4上安装Puppet配置管理工具 linux, puppetAdd comments 五052013 上篇说了下在ubuntu12.04上安装puppet,安装的版本为puppet ...