vue2.0+ 组件之间的通信

探讨一下子父组件之间的传值通信问题:

首先是环境搭建:

打开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 运行该项目

接着我们进入Demo,首先我们可以删除掉模板项目中src/components/Hello.vue,然后在App.vue中删除对于Hello子组件的注册和使用还有一些其他无关紧要的东西,此时的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中创建的属性;

把需要传给子组件的值赋给该属性。

注意事项:在利用props实现传值的过程中理论上是要实现单向传递,即父组件改变相关参数的值,子组件也相应变化,但是子组件对参数的改变不应该影响父组件。但是当props中接收的是父组件传递的引用类型(对象或者是数组)时,在子组件中对数据改变时,父组件中的数据也会相应的改变,因为两者是指向的同一地址内存。如果不想子组件的改变影响父组件可以利用深拷贝,将接受的数据进行深拷贝后在子组件中使用,而不直接操作接受的数据。深拷贝可以直接利用ES6中的obj=Object。assign({},myMessage)(在computed中定义),这样子组件的改动将不会影响到父组件。



二.子组件向父组件传值利用事件机制

子组件通过this.$emit()派发事件,父组件利用v-on对事件进行监听,实现参数的传递。

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


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


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

同时当有组件嵌套时则需要利用该机制一层一层的触发到指定层,不然直接在顶层监听子组件的子组件的事件是监听不到的,需要先向父组件派发,父组件在向上层触发。


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


子组件向父组件传值成功

总结一下:

子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件;

将需要传的值作为$emit的第二个参数,该值将作为实参传给响应自定义事件的方法;

在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听。

example2:

子组件:

this.$emit('changeCart',event.target)/*向父组件派发事件,同时传递参数event.target,后面的参数的个数不限*/

父组件:

<v-cartcontrol :food="food" v-on:changeCart="changeCart"></v-cartcontrol>

三、利用ref属性可以获取到dom元素或者是子组件,从而可以调用子组件的方法(注意2.0版本用ref取代了el)

1、当ref直接定义在dom元素上时,则通过this.$refs.name可以获取到dom对dom进行原生的操作:

<divclass="foods-wrapper" ref="foods-wrapper">

通过this.$refs获取到dom进行操作(注意ref属性的命名不能用驼峰,同时获取的时候也是)

let menuList=this.$refs['menu-wrapper'].getElementsByClassName('menu-list-hook');//此处如果用this.$refs["menuWrapper"]将获取不到元素

2、通过在引用的子组件上使用ref属性实现父组件调用子组件的方法以及属性

在父组件中引用子组件并定义ref

<v-food ref="selectfood"></v-food>

调用定义在子组件中的方法show

this.$refs.selectfood.show();//同时也可以调用子组件中的属性


在通信中,无论是子组件向父组件传值还是父组件向子组件传值,他们都有一个共同点就是有中间介质,子向父的介质是自定义事件,父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,044评论 0 29
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 10,982评论 4 129
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,198评论 0 6
  • 9.1 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,...
    白水螺丝阅读 763评论 0 2
  • 今天醒的比平时要早,看来早睡早起还是指日可待了。但一睁眼就哼哼哭哭,感觉头有点热,量体温正常,鼻子红红的,以为要感...
    谈真心阅读 246评论 0 0