Vue父子组件通信

我们在开发过程中，不可能只在一个组件里面写东西，当一个组件的内容过多时候，我们会把各个块的内容分别作为一个单独的组件分离出去，这些分离出去的组件被叫做子组件，但是一般请求数据的话还是在父组件（最大的外层中）钟情求，这就要求我们要将父组件中的数据传给各个子组件，子组件才能通过v-for指令进行遍历，遍历之后再通过item将数据传给比自己更小的子组件，这样以此类推，最后的小组件再来展示数据，组件开发中不可能因为某个小组件而单独发一次请求，这就需要用到组件之间的通信

成都创新互联是一家集网站建设,港南企业网站建设,港南品牌网站建设,网站定制,港南网站建设报价,网络营销,网络优化,港南网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

通常情况下子组件是不能直接访问父组件或者Vue实例中的数据的，但是在开发中，往往有一些数据确实需要从上层传递到下层：比如在一个页面中，我们从服务器请求到了很多数据，其中一部分数据并非使我们整个大页面组件来展示的，而是需要下面的子组件进行展示，这个时候并不会让子组件再次发送一次网络请求，而是直接让大组件（父组件）将数据传递给小组件（子组件）

官方给出的方法
父组件通过props给子组件传递数据
<子组件标签 :子组件的props属性 = "父组件的data变量" /> </子组件标签>
子组件通过自定义事件给父组件发送消息

真实开发中 ，Vue实例和子组件的通信 与 父组件和子组件的通信过程是一样的vue实例本身可以看做父组件
子组件中props的数据验证
在子组件中 props可以是数组，也可以是对象，当需要对props进行类型验证时，就需要使用对象语法了，对象的好处的是可以指定必须传过来的数据类型，在开发中很少用数组的写法

   //props: ['cmovies', 'cmessage'],
                props:{
                    //1.类型限制
                    // cmovies:Array,
                    // cmessage:String,
                    //2.提供默认值  以及必传值
                    cmovies:{
                        type:Array,
                        default(){
                         return []
                        }
                    },
                    cmessage:{
                        type:String,
                        default:"xiaosaobi",
                        required:true
                    }
                },

分享文章：Vue父子组件通信
网页网址：https://www.cdcxhl.com/article10/iheedo.html

成都网站建设公司_创新互联，为您提供商城网站、虚拟主机、营销型网站建设、定制网站、网站营销、微信公众号

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联