成都创新互联网站制作重庆分公司

怎样在vue中实现父子组件通信

怎样在vue中实现父子组件通信?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

白云鄂ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18982081108(备注:SSL证书合作)期待与您的合作!

一、父组件向子组件传递数据

1、首先形成父子组件关系




 
 Document
 


 
 
    
   

{{cmovies}}

   

{{cmessage}}

  
   

2、在子组件中定义一个props,定义两个变量 (messages) (moviess)

props: ['messages', 'moviess']

3、使用子组件时,用V-bind绑定两个变量(messages) (moviess),并且把父组件中的数据(message)(movies)传给这两个变量。


****完整代码*****




 
 Document
 


 
  
  
 
        
   

{{messages}}

   
              {{item}}         
  
   

** props中补充写法

props: {
    // 1、类型限制
    // messages:Array,
    // moviess:String,

    // 提供一些默认值
    messages: {
     type: String,
     default: 'aaaa',
     required: true
    },
    // 当使用组件的时候,没有绑定props中定义的变量,就会显示定义的默认值
    moviess: {
     // 类型是对象或数组,默认值必需是一个函数。 
     type: Array,
     // default: []
     default() {
      return []
     }
    }
   }

 二、子组件向父组件传数据

1、构成父子组件关系

 2、在子组件中自定义一个事件      作用:发射一个事件给父组件

{{item.name}}
   methods: {
    btnclick: function (item) {
     // 发射事件:自定义事件
     this.$emit('itemclick', item)
    }
   }

3、在父组件的模板中使用子组件中定义的事件 @itemclick="cpnclick"   并且在父组件创建一个新的事件 cpnclick


   methods: {
    cpnclick: function (item) {
     console.log('cpnclick', item)
    }
   }

***完整代码***




 
 
 
 Document
 



 
      
   {{item.name}}   
   

vue是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架,Vue与其它大型框架的区别是,使用Vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

关于怎样在vue中实现父子组件通信问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。


文章名称:怎样在vue中实现父子组件通信
路径分享:http://cxhlcq.com/article/iijgdh.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部