Vue中父子组件间传值问题怎么解决

本篇内容介绍了“Vue中父子组件间传值问题怎么解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

创新互联是一家业务范围包括IDC托管业务,网络空间、主机租用、主机托管,四川、重庆、广东电信服务器租用,成都托管服务器,成都网通服务器托管,成都服务器租用,业务范围遍及中国大陆、港澳台以及欧美等多个国家及地区的互联网数据服务公司。

一.父组件向子组件传值

父组件向子组件传值会用到:Prop,一般的我们需要在子组件中进行相关的声明,如下所示:

子组件为HellowWorld.vue

在父组件App.vue中

那么在页面上效果就是:
Vue中父子组件间传值问题怎么解决
当然我们也可以写一些事件来进行动态的数据交互,例如:
Vue中父子组件间传值问题怎么解决

二.子组件向父组件传值

在子组件传值时会用到$emit,值得注意的是:在子组件传值时候的方法要与父组件中监听的方法名称相同,也就是示例中的 listenToChild。

Helloworld.vue子组件:

h4 {
  margin: 40px 0 0;}ul {
  list-style-type: none;
  padding: 0;}/* li {
  display: inline-block;
  margin: 0 10px;
} */a {
  color: #42b983;}

App.vue父组件:

效果:
Vue中父子组件间传值问题怎么解决

“Vue中父子组件间传值问题怎么解决”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


网页标题:Vue中父子组件间传值问题怎么解决
本文路径:http://pwwzsj.com/article/gjhpsi.html