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提示 &quot;object expected&quot;的解决方法
Dec 13 Javascript
jQuery实现360°全景拖动展示
Mar 18 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
Jun 10 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
Google 地图API资料整理及详细介绍
Aug 06 Javascript
浅谈javascript中执行环境(作用域)与作用域链
Dec 08 Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 Javascript
微信小程序选择图片和放大预览图片功能
Nov 02 Javascript
浅谈js闭包理解
Apr 01 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
js实现图片上传到服务器和回显
Jan 19 Javascript
jQuery实现手风琴特效
Jan 11 jQuery
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将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
PHP $_FILES函数详解
2011/03/09 PHP
PHP中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
PHP安全防范技巧分享
2011/11/03 PHP
php htmlspecialchars()与shtmlspecialchars()函数的深入分析
2013/06/05 PHP
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
php实现判断访问来路是否为搜索引擎机器人的方法
2015/04/15 PHP
非常实用的php验证码类
2016/05/15 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
PHP中的Iterator迭代对象属性详解
2019/04/12 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
javascript常用的方法分享
2015/07/01 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
实用jquery操作表单元素的简单代码
2016/07/04 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
python清除字符串前后空格函数的方法
2018/10/21 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
使用Pycharm分段执行代码
2020/04/15 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
网络安全类面试题
2015/08/01 面试题
行政监察建议书
2014/05/19 职场文书
中国梦演讲稿范文
2014/08/28 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
导游词之井冈山
2019/11/20 职场文书
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python
Python实现学生管理系统(面向对象版)
2021/06/24 Python