Vue.js父与子组件之间传参 父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为ht
Vue.js父与子组件之间传参
父向子组件传参
例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与componentA对于它来说是一样的,不好区分,所以使用小写-小写这种写法)。而子组件componetA中,声明props参数’msgfromfa’之后,就可以收到父向子组件传的参数了。例子中将msgfromfa显示在<p>
标签中。
App.vue中
1
|
1<component-a msgfromfa= "(Just Say U Love Me)" ></component-a>
|
1
2
3
4
5
6
7
8
|
mport componentA from './components/componentA'
export default {
new Vue({
components: {
componentA
}
})
}
|
componentA.vue中
1
|
<p>{{ msgfromfa }}</p>
|
1
2
3
|
export default {
props: [ 'msgfromfa' ]
}
|
父向子组件传参(.$broadcast)
用法:vm.$broadcast( event, […args] )广播事件,通知给当前实例的全部后代。因为后代有多个枝杈,事件将沿着各“路径”通知。
例子:父组件App.vue中<input>
绑定了键盘事件,回车触发addNew方法,广播事件”onAddnew”,并传参this.items。子组件componentA中,注册”onAddnew”事件,打印收到的参数items。
App.vue中
<div id="app"> <input v-model="newItem" @keyup.enter="addNew"/> </div>
![](/assets/blank.gif)
import componentA from './components/componentA' export default { new Vue({ methods: { addNew: function() { this.$broadcast('onAddnew', this.items) } } }) }
![](/assets/blank.gif)
componentA.vue中
1
2
3
4
5
6
7
8
|
import componentA from './components/componentA'
export default {
events: {
'onAddnew' : function(items){
console.log(items)
}
}
}
|
子组件向父传参(.$emit)
用法:vm.$emit( event, […args] ),触发当前实例上的事件。附加参数都会传给监听器回调。
例子:App.vue中component-a绑定了自定义事件”child-say”。子组件componentA中,单击按钮后触发”child-say”事件,并传参msg给父组件。父组件中listenToMyBoy方法把msg赋值给childWords,显示在<p>
标签中。
App.vue中
<p>Do you like me? {{childWords}}</p> <component-a msgfromfa="(Just Say U Love Me)" v-on:child-say="listenToMyBoy"></component-a>
![](/assets/blank.gif)
import componentA from './components/componentA' export default { new Vue({ data: function () { return { childWords: "" } }, components: { componentA }, methods: { listenToMyBoy: function (msg){ this.childWords = msg } } }) }
![](/assets/blank.gif)
componentA.vue中
<button v-on:click="onClickMe">like!</button>
![](/assets/blank.gif)
import componentA from './components/componentA' export default { data: function () { return { msg: 'I like you!' } }, methods: { onClickMe: function(){ this.$emit('child-say',this.msg); } } }
![](/assets/blank.gif)
子组件向父传参(.$dispatch)
用法:vm.$dispatch( event, […args] ),派发事件,首先在实例上触发它,然后沿着父链向上冒泡在触发一个监听器后停止。
例子:App.vue中events中注册”child-say”事件。子组件componentA中,单击按钮后触发”child-say”事件,并传参msg给父组件。父组件中”child-say”方法把msg赋值给childWords,显示在<p>
标签中。
App.vue中
<p>Do you like me? {{childWords}}</p> <component-a msgfromfa="(Just Say U Love Me)"></component-a>
![](/assets/blank.gif)
import componentA from './components/componentA' export default { new Vue({ events: { 'child-say' : function(msg){ this.childWords = msg } } }) }
![](/assets/blank.gif)
componentA.vue中
<button v-on:click="onClickMe">like!</button>
![](/assets/blank.gif)
import componentA from './components/componentA' export default { data: function () { return { msg: 'I like you!' } }, methods: { onClickMe: function(){ this.$dispatch('child-say',this.msg); } } }
Vue.js父与子组件之间传参 父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为ht相关推荐
- vue,js,html三种文件之间是怎样的关系?
vue,js,html三种文件之间是怎样的关系? 比如说,我创建一个js文件,vue实例是在js中创建,component组件也是在js中注册, 然后我去html中导入这个JS,这个时候我就可以在ht ...
- Vue.js 2.5 发布,而这个会玩的团队已经自研出用 Vue 开发小程序的框架了
在尤大微博铺垫着"将会引入一些关于 TypeScript 的改进"一周之后,代号为 Level E 的 Vue.js 2.5 带着日漫风来到了我们眼前.从 Release Note ...
- Vue.js从0开始到实战开发1:通过简单案例从0开始了解Vue
Vue与静态页面的对比 静态页面一般是这样的代码:网页上所有的东西都是直接写死的不会改变. 如果把网页上一些需要根据数据请求结果动态变化的内容用一个变量(或者叫做占位符代替)那么这个网页就变成了动态内 ...
- vue.js java php_准吗?Java程序员喜欢AngularJS,PHP程序员喜欢Vue.js!
编程语言与框架或者库之间有联系是很正常的事情,如果我们告诉你,使用某一种编程语言或技术的开发人员可能更喜欢某个框架,你会作何反应呢?Stack Overflow根据网站内最常访问的标签将开发人员分为多 ...
- 织梦标签把","逗号改成空格技巧
DedeCms是现在非常流行的建站系统,因为其实容易入门,尤其对于广大草根站长来说,dedecms太棒了,随着其版本不断升级,也有一些小细节不太好用,例如:因为手动发文章比较多,添加tag标签的时候老 ...
- php 提取视频中的声音,如何提取视频中的声音,并把画面改成文字内容
现在越来越多的人会在网络平台分享小视频,看到影视剧中的精彩片段就可以截取下载分享到视频平台,当然还可以对下载的视频进行二次创作再分享.小编之前就看到一个小视频效果挺好,视频播放的声音是影视剧某片段的原 ...
- c语言将英文逗号转成中文逗号,Word中怎样把文中的英文逗号改成中文逗号?
回答: 将Word2010/2007文档中表格转换为文本 在将文档中表格转化为文字方面,Word 2010余以前版本具有相同的功能,只不过更为强大,而且在坐的位置发生了改变.在Word2010文档中, ...
- html 斜体变正体怎么变,WORD中编辑公式时怎样将斜体改成正体
2007-05-05 WORD中如何输入公式?word Word中的公式编辑器 使用Word编写公式需要用到Word自带的"公式编辑器"工具,因此先要看看你的Word里有没有装上这 ...
- Web前端-Vue.js必备框架(一)
Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head><meta char ...
最新文章
- ES6深拷贝与浅拷贝
- 养成一个新习惯,只需要这个大脑区域兴奋0.5秒
- qs.parse()、qs.stringify()使用方法
- Oracle常用字段数据类型/to_char函数
- 屏蔽Crash 提示框的两种方式
- ZT 类模板Stack的实现 by vector
- 微生物组-宏基因组分析第8期 (报名直播课免费参加线下课2020.7,最后一周)
- 基于java SSM框架的旅游网站设计开发(含源文件)
- css @语法,@规则 @import @charset @font-face @fontdef @media @page
- 格科半导体成功引入ASML先进ArF光刻机
- 【Clickhouse】Connection is currently waiting for an insert operation, check your previous InsertState
- 【MySQL】MySQL 8不支持查询缓存
- android 绘图流程,Android View绘制流程
- [转载] Go语言的自重写程序
- 数据库删除数据 truncate 与 delete
- 澳洲7人自驾选什么车_自驾车在哪里
- Revisiting Stereo Depth Estimation From a Sequence-to Sequence Perspective with Transformer——阅读阶段
- 关于手机传感器的一些总结
- 3.25万颗!真正前装上车的激光雷达供应商有哪几家?
- 嵌入式开发板硬件操作入门学习3——电机驱动板