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 相关文章推荐
jquery.alert 弹出式复选框实现代码
Jun 15 Javascript
JavaScript 继承使用分析
May 12 Javascript
通过javascript把图片转化为字符画
Oct 24 Javascript
jquery插件bxslider用法实例分析
Apr 16 Javascript
图解JavaScript中的this关键字
May 28 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 Javascript
整理一下常见的IE错误
Nov 18 Javascript
9种改善AngularJS性能的方法
Nov 28 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
Dec 05 Javascript
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
Vue2.0实现组件数据的双向绑定问题
Mar 06 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
php过滤XSS攻击的函数
2013/11/12 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
JAVASCRIPT函数作用域和提前声明 分享
2013/08/22 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
jQuery中ScrollTo用法示例
2016/09/04 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
用Python实现一个简单的能够发送带附件的邮件程序的教程
2015/04/08 Python
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
python与C互相调用的方法详解
2017/07/14 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
python实现京东订单推送到测试环境,提供便利操作示例
2019/08/09 Python
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
公司新员工的演讲稿注意事项
2014/01/01 职场文书
大学生蛋糕店创业计划书
2014/01/13 职场文书
三年级学生评语
2014/04/23 职场文书
爱耳日活动总结
2014/04/30 职场文书
高中教师个人总结
2015/02/10 职场文书
十月围城观后感
2015/06/08 职场文书
在职证明范本
2015/06/15 职场文书
导游词之西安骊山
2019/12/20 职场文书
在pyCharm中下载第三方库的方法
2021/04/18 Python
比较几种Redis集群方案
2021/06/21 Redis