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 $.ajax入门应用一
Nov 19 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
Jun 18 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
Jun 19 Javascript
基于jQuery实现左右图片轮播(原理通用)
Dec 24 Javascript
前端性能优化及技巧
May 06 Javascript
每日十条JavaScript经验技巧(二)
Jun 23 Javascript
jQuery实现Select左右复制移动内容
Aug 05 Javascript
JS实现图片垂直居中显示小结
Dec 13 Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
Sep 11 Javascript
使用JavaScript获取Django模板指定键值数据
May 27 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
在普通HTTP上安全地传输密码
2007/07/21 PHP
深入PHP中的HashTable结构详解
2013/06/13 PHP
PHP防止sql注入小技巧之sql预处理原理与实现方法分析
2019/12/13 PHP
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
2016/10/13 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
2017/08/31 Javascript
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
vue swipe自定义组件实现轮播效果
2019/07/03 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
2020/11/05 Javascript
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
Python统计文本词汇出现次数的实例代码
2020/02/27 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
Nike台湾官方商店:Nike.com (TW)
2017/08/16 全球购物
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
大学校务公开实施方案
2014/03/31 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书
java开发双人五子棋游戏
2022/05/06 Java/Android
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android