Vue.js父与子组件之间传参示例


Posted in Javascript onFebruary 28, 2017

例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与componentA对于它来说是一样的,不好区分,所以使用小写-小写这种写法)。而子组件componetA中,声明props参数'msgfromfa'之后,就可以收到父向子组件传的参数了。例子中将msgfromfa显示在<p>标签中。

App.vue中

<component-a msgfromfa="(Just Say U Love Me)"></component-a>
import componentA from './components/componentA'

export default {

new Vue({

components: {

componentA

}

})

}

componentA.vue中

<p>{{ msgfromfa }}</p>
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>
import componentA from './components/componentA'
export default {
new Vue({
methods: {
addNew: function() {
this.$broadcast('onAddnew', this.items)
}
}
})
}

componentA.vue中

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>
import componentA from './components/componentA'
export default {
new Vue({
data: function () {
return {
childWords: ""
}
},
components: {
componentA
},
methods: {
listenToMyBoy: function (msg){
this.childWords = msg
}
}
})
}

componentA.vue中

<button v-on:click="onClickMe">like!</button>
import componentA from './components/componentA'
export default {
data: function () {
return {
msg: 'I like you!'
}
},
methods: {
onClickMe: function(){
this.$emit('child-say',this.msg);
}
}
}

子组件向父传参(.$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>
import componentA from './components/componentA'
export default {
new Vue({
events: {
'child-say' : function(msg){
this.childWords = msg
}
}
})
}

componentA.vue中

<button v-on:click="onClickMe">like!</button>
import componentA from './components/componentA'
export default {
data: function () {
return {
msg: 'I like you!'
}
},
methods: {
onClickMe: function(){
this.$dispatch('child-say',this.msg);
}
}
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 有名函数表达式全面解析
Mar 19 Javascript
js 为label标签和div标签赋值的方法
Aug 08 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
jQuery组件easyui基本布局实现代码
Aug 25 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
js调用刷新界面的几种方式
May 03 Javascript
微信小程序分页加载的实例代码
Jul 11 Javascript
vue+webpack实现异步组件加载的方法
Feb 03 Javascript
JavaScript中字符串的常用操作方法及特殊字符
Mar 18 Javascript
vue.js中npm安装教程图解
Apr 10 Javascript
vue+animation实现翻页动画
Jun 29 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 #Javascript
JS对象创建的几种方式整理
Feb 28 #Javascript
js仿淘宝评价评分功能
Feb 28 #Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 #Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 #Javascript
JavaScript Uploadify文件上传实例
Feb 28 #Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 #Javascript
You might like
浅析SVN常见问题及解决方法
2013/06/21 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
javascript中的对象创建 实例附注释
2011/02/08 Javascript
js单例模式详解实例
2013/11/21 Javascript
jquery获得option的值和对option进行操作
2013/12/13 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
JavaScript动态生成二维码图片
2016/04/20 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
bootstrap table服务端实现分页效果
2017/08/10 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
微信小程序的部署方法步骤
2018/09/04 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
使用异步组件优化Vue应用程序的性能
2019/04/28 Javascript
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python中模块与包有相同名字的处理方法
2017/05/05 Python
深入理解Python分布式爬虫原理
2017/11/23 Python
Python生成器以及应用实例解析
2018/02/08 Python
python 日志增量抓取实现方法
2018/04/28 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
大学四年规划书范文
2013/12/27 职场文书
质量保证书范本
2014/04/29 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
入党转正介绍人意见
2015/06/03 职场文书
北京爱情故事观后感
2015/06/12 职场文书
收入证明申请书
2015/06/12 职场文书
《春酒》教学反思
2016/02/22 职场文书
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏