Vue.js父与子组件之间传参示例

  • 更新时间:2022-06-28 08:53:41
  • 编辑:赖粟梅
本站收集了一篇Vue.js相关的编程文章,网友赵浦和根据主题投稿了本篇教程内容,涉及到vue2.0、子父组件传参、vue.js、组件传参、vue组件之间传递参数相关内容,已被991网友关注,内容中涉及的知识点可以在下方直接下载获取。

参考资料

正文内容

例子: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.js相关教程

  • Vue.js样式动态绑定的具体实例方法

    这篇文章主要介绍了Vue.js样式动态绑定实现小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    发布时间:2020-01-20

  • Vue.js中使用Mixins的方法详解

    本篇文章主要介绍了在Vue.js中使用Mixins的方法,Vue的Mixins是非常实用的编程方式,可以使代码变得容易理解,有兴趣的一起来了解一下

    发布时间:2020-06-03

  • Vue.js如何划分组件

    这篇文章主要介绍了Vue.js划分组件的方法,需要的朋友可以参考下

    发布时间:2020-03-20

  • vue.js的vue-cli脚手架使用百度地图API的代码

    今天小编就为大家分享一篇关于vue.js的vue-cli脚手架中使用百度地图API的实例,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧

    发布时间:2020-01-07

  • 关于Vue.js中 v-model 指令的修饰符

    v-model 指令默认会在 input 事件中加载输入框中的数据(中文输入法中输入拼音的过程除外)。这篇文章通过实例代码给大家介绍Vue.js中 v-model 指令的修饰,感兴趣的朋友跟随小编一起看看吧

    发布时间:2020-02-29

  • webpack+vue.js入门教学

    随着前端的快速发展,非常多的js框架被应用到项目中。Vue.js本身支持对组件的异步加载,配合Webpack的分块打包功能,可以极其轻松地实现组件的异步按需加载。 这篇文章是webpack+vue.j的入门教程

    发布时间:2020-07-21

  • 如何使用vue.js国际化 vue-i18n插件

    本篇文章主要介绍了vue.js国际化 vue-i18n插件的使用详解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    发布时间:2020-01-13

  • JavaScript之Vue.js【入门基础】

    本文主要介绍一下Vue.js并附上在Node.js环境下搭建一个简单的Demo实例代码。条理清晰,有助于阅读和理解。有需要的朋友可以看下

    发布时间:2022-04-03

用户留言