今看到一篇很不错的vue组件传值文章,便于理解,遂做笔记~

一般页面的视图App.vue应为这样

一.父组件向子组件传值

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

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

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

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

此时浏览器中

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

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

二.子组件向父组件传值

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

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

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

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

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

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

---恢复内容结束---

今看到一篇很不错的vue组件传值文章,便于理解,遂做笔记~

一般页面的视图App.vue应为这样
一.父组件向子组件传值

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

 

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中组件之间的传值有好几种情况 1.父向子传值 父组件向子组件传值使用props,直接上实例 city.vue是父组件,list.vue是子组件city.vue里定义cities和hotCitie ...

  2. vue 组件之间互相传值:兄弟组件通信

    vue 组件之间互相传值:兄弟组件通信我们在项目中经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入 vuex 轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入 vuex ...

  3. vue组件之间的传值——中央事件总线与跨组件之间的通信($attrs、$listeners)

    vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...

  4. vue 组件之间相互传值 父传子 子传父

    1.父传子 把要传入的值放到父标签里  子组件使用props接收 父写法 子写法 2.子传父 子组件: childrenOnclick() { // 发布自定义事件 this.$emit(" ...

  5. EasyDSS RTMP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值

    之前接触最多的都是EasyNVR,主要针对的都是前端的一些问题.也有接触到一些easydss流媒体服务器. 前端方面的,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是 ...

  6. EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值

    前端方面,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是传统的js来进行开发,而EasyDSS使用的是webpack+vue来进行开发的,了解vue+webpack的 ...

  7. vue组件之间的传值方式

    一.父组件向子组件传值方式 1.1父组件向子组件传数据方式 <!DOCTYPE html> <html lang="en"> <head> &l ...

  8. vue组件之间通信传值

    原文链接:https://blog.csdn.net/lander_xiong/article/details/79018737 我认为这位博主的这篇文章写的非常详细,通俗易懂, 我们这次的vue项目 ...

  9. vue 组件之间的传值

    父向子传值父组件 <v-footer :projectdat="dat"></v-footer> export default { data() { ret ...

随机推荐

  1. Java 8 集合不完全一览

    JDK 8 List 名称 线程安全 数据结构 允许 null 默认初始容量 扩容策略 备注 ArrayList 不安全 数组 允许 10 1.5 * old LinkedList 不安全 双链表 允 ...

  2. Django-xadmin+rule对象级权限的实现

    原文:https://blog.csdn.net/zcyuefan/article/details/77743380 1. 需求vs现状 1.1 需求要求做一个ERP后台辅助管理的程序,有以下几项基本 ...

  3. mysql查询昨天 一周前 一月前 一年前的数据

    mysql 昨天 一周前 一月前 一年前的数据 这里主要用到了DATE_SUB, 参考如下 代码如下: SELECT * FROM yh_contentwhere inputtime>DATE_ ...

  4. (36)Spring Boot Cache理论篇【从零开始学Spring Boot】

    Spring Boot Cache理论篇 在上一篇中我们介绍了Spring Boot集成Redis的实战例子,里面使用到了Spring Cache,那么什么是Spring Cache呢,本章将会做一个 ...

  5. ExtJs之Ext.Model的MemoryProxy

    书上的代码已完全不可参考,只好按知识点从网上查资料一个一个实例 了. <!DOCTYPE html> <html> <head> <title>ExtJ ...

  6. oracle 工具:tkprof

    https://docs.oracle.com/cd/B10501_01/server.920/a96533/ex_plan.htm http://blog.csdn.net/dba_waterbin ...

  7. Spring MVC-表单(Form)标签-文本框(Text Box)示例(转载实践)

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_textbox.htm 说明:示例基于Spring MVC 4.1.6. 以下示例 ...

  8. javascript的函数、创建对象、封装、属性和方法、继承

    转自原文javascript的函数.创建对象.封装.属性和方法.继承 一,function 从一开始接触到js就感觉好灵活,每个人的写法都不一样,比如一个function就有N种写法 如:functi ...

  9. [jQuery]data-不能乱用啊

    使用jQuery easy ui做一个拖拽的功能 因为在要拖拽的元素中使用了date-options={OPTIONS}来存数据,因为没有替换{OPTIONS} jQuery貌似把我的}识别成方法的} ...

  10. pl/sql developer 自带汉化选项

    pl/sql developer 自带汉化选项 版本:11.0.2 工具 -> 选项 -> 用户界面 ->外观, 第一项就是选择语言: 选择Chinese.lang,如果有的话: