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的弹出框插件
Mar 18 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
js中for in的用法示例解析
Dec 25 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
JavaScript 性能优化小结
Oct 12 Javascript
Vue2 配置 Axios api 接口调用文件的方法
Nov 13 Javascript
使用D3.js构建实时图形的示例代码
Aug 28 Javascript
小程序实现多选框功能
Oct 30 Javascript
JavaScript 判断iPhone X Series机型的方法
Jan 28 Javascript
浅谈javascript错误处理
Aug 11 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 Javascript
微信小程序实现自定义底部导航
Nov 18 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
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
Document 对象的常用方法
2009/07/31 Javascript
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
JavaScript中的遍历详解(多种遍历)
2017/04/07 Javascript
通过js修改input、select默认字体颜色
2017/04/19 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
react配置antd按需加载的使用
2019/02/11 Javascript
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
[01:47]2018年度DOTA2最佳教练-完美盛典
2018/12/16 DOTA
Linux CentOS7下安装python3 的方法
2018/01/21 Python
python 连接各类主流数据库的实例代码
2018/01/30 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
python绘制漏斗图步骤详解
2019/03/04 Python
Python 切分数组实例解析
2019/11/07 Python
python自动分箱,计算woe,iv的实例代码
2019/11/22 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
pandas apply多线程实现代码
2020/08/17 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
土耳其国际性时尚购物网站:Modanisa
2018/01/19 全球购物
Origins悦木之源香港官网:雅诗兰黛集团高端植物护肤品牌
2018/03/21 全球购物
英国电信商店:BT Shop
2019/12/17 全球购物
建筑节能汇报材料
2014/08/22 职场文书
演讲稿开场白台词
2014/08/25 职场文书
工厂见习报告范文
2014/10/31 职场文书
医生见习报告范文
2014/11/03 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
2015教师节通讯稿
2015/07/20 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS