宜宾网站建设公司

怎样在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中实现父子组件通信
URL网址：http://ybzwz.com/article/iijgdh.html

其他资讯