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实现可拖动的浮动层完整代码
May 27 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
node.js中的fs.truncate方法使用说明
Dec 15 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
Jquery promise实现一张一张加载图片
Nov 13 Javascript
js操作table元素实现表格行列新增、删除技巧总结
Nov 18 Javascript
javascript实现动态统计图开发实例
Nov 21 Javascript
canvas实现图像放大镜
Feb 06 Javascript
Vue 自定义动态组件实例详解
Mar 28 Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 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
服务器端解压缩zip的脚本
2006/12/22 PHP
一个PHP模板,主要想体现一下思路
2006/12/25 PHP
PHP将回调函数作用到给定数组单元的方法
2014/08/19 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
谈一谈bootstrap响应式布局
2016/05/23 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
2017/05/20 jQuery
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
Vue学习笔记进阶篇之过渡状态详解
2017/07/14 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
原生js实现购物车功能
2020/09/23 Javascript
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
CentOS6.5设置Django开发环境
2016/10/13 Python
Python可迭代对象操作示例
2019/05/07 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
Django使用rest_framework写出API
2020/05/21 Python
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
DOM和JQuery对象有什么区别
2016/11/11 面试题
测绘工程本科生求职信
2013/10/10 职场文书
班班通校本培训方案
2014/03/12 职场文书
公司办公室岗位职责
2014/03/19 职场文书
学生保证书范文
2014/04/28 职场文书
私人委托书格式
2014/09/10 职场文书
介绍信如何写
2015/01/31 职场文书
幼儿园大班个人总结
2015/02/28 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书