vue组件开发之组件之间的数据交互

最新推荐文章于 2024-07-23 14:29:05 发布

我今年六岁

最新推荐文章于 2024-07-23 14:29:05 发布

阅读量768

点赞数

分类专栏：前端笔记文章标签： vue

本文链接：https://blog.csdn.net/poppy995/article/details/98341901

版权

本文介绍了Vue组件间数据交互的方式，包括父组件如何通过props向子组件传值，遵循单向数据流原则，以及子组件如何通过自定义事件向父组件传递信息。此外，还探讨了非父子组件间利用事件中心进行通信的方法，如监听和触发事件。

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

                    
                        
                    
                    组件键数据交互 
 
父组件向子组件传值 
组件内部通过props接收传递过来的值Vue.component('menu-item',{
     
props:['title',...],//里面的值都是从父组件中传递过来的
template:'<div>{
     {title}}</div>'
  })
 
父组件通过属性将值传递给子组件 <menu-item title='来自父组件的数据'></menu-item> 
 <!--虽然说是从父组件来的值，但实际是静态的值-->
  <menu-item :title='title'></menu-item>
  <!--动态的 在父组件中要有title这个属性值-->
 实际上props中的就是给了子组件一个名称，还是需要在创建的标签中给这个名称赋予父组件的值
props属性名规则
 在props中使用驼峰形式，模板中需要使用短横线形式，原因是DOM是不区分大小写的
 在字符串形式的模板中是没有这个限制的
props属性值类型
 字符串 String
 数值 Number
 布尔值 Boolean
 数组 Array
 对象 Object
基本用法
 props传递数据原则：单向数据流 子组件修改值是不会影响到父组件的值的 
  子组件通过自定义事件向父组件传递信息
 <button v-on:click='$emit("enlarge-text")'>扩大字体</button>

                