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. JavaScript concat() 方法

    昨天接触了一个项目,我的tbody变量是一个数组,然后数据返回的是数组里面包含对象,我刚开始没看懂这个concat的作用,然后百度一下javascript中的用法,以此记录concat的方法: dat ...

  2. vue.js(1)--创建vue实例的基本结构

    vue实例基本结构与MVVM框架 (1)vue实例基本结构 <!DOCTYPE html> <html lang="en"> <head> &l ...

  3. Genymotion模拟器使用camera

    1.前言 最近开发react-native的app,上传图片功能需要使用相机,发现Genymotion默认的相机不工作.查看同行的博客解决了,归纳整理一下. 2.步骤 2.1安装Genymotion: ...

  4. navicat修改表的主键自增长报错

    这周自己在构思一个项目的表的设计,由于是第一次,所以走了很多弯路,也遇到了几个问题,这里暂时贴上来. 我用PowerDesign设计出一部分关联表的ER图之后,导出了sql文件之后用navicat导入 ...

  5. python 类的成员及继承

    1. @staticmethod 静态方法 静态方法不能访问实例变量和类变量,除了身处类里面,所以只能通过类调用以外,它其实和类没有什么关系.如果想要用它访问实例变量或类变量,需要把实例和类传递给函数 ...

  6. java课堂作业3 第一题 能查阅申请对象个数

    实验代码 public class Num { public static void main(String[] args) { // TODO Auto-generated method stub ...

  7. C# 判断 List 是否存在某一个字段

    foreach (var item in list_QuestionnaireSelect) { EntityQuestionnaireParticipantsReport _entityReport ...

  8. Rsync服务端部署流程

    Rsync服务端部署流程       Rsync服务端部署流程: 一.rsync服务端配置流程 配置rsync配置文件/etc/rsyncd.conf 创建同步的本地目录/dingjian 并根据需要 ...

  9. form表单和CSS

    一.form表单 1. form表单有什么用 能够获取用户输入的信息(输入,选择, 上传的文件),并且将这些数据全部发送给后端 2. form表单的用法 (1)有两个重要参数: action : 控制 ...

  10. ESP8266-Station模式--我想连上谁

    Station模式又叫做站点工作模式,类似于无线终端 处于Station模式下的ESP8266,可以连接到AP.通过Station(简称为“STA”)模式,ESP8266作为客户端连接到路由的wifi ...