Vue.js父与子组件之间传参示例
例子：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);
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在实际的Vue开发中,我们经常需要在多个组件之间共享一些工具函数或类,比如格式化日期、处理字符串、操作数组等,本文将详细介绍如何在Vue实例上挂载自己定义的工具类,并在项目中高效使用这些工具,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了vue swipeCell滑动单元格(仿微信)的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
这篇文章主要介绍了vue中div禁止点击事件的实现，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Vue获取初始化数据是放在created还是mounted解读
这篇文章主要介绍了Vue获取初始化数据是放在created还是mounted的问题解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了如何理解Vue的v-model指令的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
vue中watch监听器用法之deep、immediate、flush
Vue是可以监听到多层级数据改变的,且可以在页面上做出对应展示,下面这篇文章主要给大家介绍了关于vue中watch监听器用法之deep、immediate、flush的相关资料,需要的朋友可以参考下2022-09-09
众所周知vue是操作dom元素的,那么如果有元素要动态绑定样式,这种需求,还是要通过改变数据来改变视图的样式,下面这篇文章主要给大家介绍了关于Vue动态样式绑定的相关资料,需要的朋友可以参考下2023-04-04
nginx是一个高性能的HTTP和反向代理服务器。这篇文章主要介绍了vue.js项目nginx部署,需要的朋友可以参考下2018-04-04
这篇文章主要介绍了vue3 elementplus table合并写法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-06-06
这篇文章主要介绍了vue2与vue3双向数据绑定的区别说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论