Vue应用程序开发（第2版）课件 第4章Vue.js组件第2节组件通信.pptxVIP

第4章：Vue.js组件《Vue应用程序开发》

010203005Part14.1组件的基本使用Part24.2组件通信Part34.3动态组件Part44.4章节案例目录CONTENTS

4.2.2组件通信组件是Vue.js最强大的功能之一，组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。使用组件不仅仅是要把模板的内容进行复用，更重要的是组件间的通信。通信方式根据组件之间的关系有不同之处。组件间通信包括三种情况：父组件向子组件通信、子组件向父组件通信、非父子组件之间的通信。

1.父组件向子组件传递数据通常父组件的模板中包含子组件，父组件要正向的向子组件传递数据或者参数，子组件接收到后根据参数的不同来进行对应的渲染。这个正向的数据传递就是父--子组件通信。在Vue组件中是通过props来实现的。props的值有两种：一种是字符串数组，一种是对象。

1.父组件向子组件传递数据上面实例中，数据传递的步骤可理解为：子组件在props中创建了两个属性[message,ImgSrc]，用以接收父组件传过来的值；在父组件中注册子组件；在子组件标签中添加子组件props中创建的属性；把需要传给子组件的值赋给该属性。props字符串数组中的message和imgsrc会作为组件my-component的属性来赋值父组件要传递的数据，子组件中渲染出来的数据是来