组件之间的那些事

最新推荐文章于 2023-03-05 08:43:30 发布

cly1223_abby

最新推荐文章于 2023-03-05 08:43:30 发布

阅读量154

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/cly1223_abby/article/details/80520167

版权

本文详细探讨了前端开发中组件间的通信方式，包括props、事件系统、状态管理库（如Vuex）的应用，以及如何在React、Vue和Angular等框架中实现高效的数据流动。通过对这些通信模式的分析，帮助开发者优化应用性能并提升代码可维护性。

摘要由CSDN通过智能技术生成

 
 一、如何引入组件 

 
 1.1、在需要引入组件中文件中导入组件的路径 

 
 1.2、引入之后注册组件 

 
 组件中的名字形式可以为：changpic(给的组件名称):changpic(组件) 

 
 1.3、注册之后可直接在模板中使用 

 
 <template> 

 
 <changpic></changpic> 

 
 </template> 

 
 二、父组件的数据如何传给子组件中 

 
 2.1、采用props属性传给子组件中 

 
 2.1.1、传单个数据 

 
 在父组件中，写子组件标签时，可以绑定一个属性传给子组件。 

 
 例如： 

 
 父组件（index.vue文件） 

 
 <template> 

 
 <changpic :istransform="seen"></changpic> 

 
 </template> 

 
 父组件中script： 

 
 data(){
   

 
 return{
   

 
 seen:false 

}

}

 
 子组件中则可以在script中用props属性接受数据，与data同等级。 

 
 props:['istransform'] 

 
 则可以在模板中使用 

 
 <template> 

 
 {
  {istransform}} //false 

 
 </template> 

 
 2.1.2、传多个数据 

 
 步骤： 

 
 1）先在data中定义一个数组接收数据，arr:[ ] 

 
 2）写一个计算该属性的方法，用Vue的全局方法set来实时更新数据的变化， 并且返回该值, 

关注