工业UI开发技术-课件 3.4.2-组件间通讯.pptxVIP

组件间通讯深圳市信息职业技术学院

目录01组件间通讯场景02props属性03组件间进行通讯

本节目标 通过对组件间通讯的介绍，掌握组件间通讯的应用场景，掌握props属性用法，通过任务实施掌握组件间的数据传递。通过本节学习可以：掌握组件间通讯场景掌握props属性用法掌握组件间通讯用法

01组件间通讯的概念

组件间通讯的概念如果我们正在构建一个学科项目，我们可能需要一个表示课程的组件。我们希望所有学科分享相同的视觉布局，但有不同的内容，比如课程的名称。要实现这样的效果，自然必须向组件中传递数据。组件间通讯：组件之间进行数据的传递应用场景：

02props属性

Props属性props是一种特别的attributes，你可以在组件上声明注册。要传递给指定组件一个数据，我们必须在该组件的props列表上声明该属性列表。

Props属性当一个值被传递给prop时，它将成为该组件实例上的一个属性。该属性的值可以像其他组件属性一样，在模板和组件的this上下文中访问。一个组件可以有任意多的prop，默认情况下，所有prop都接受任意类型的值。当一个prop被注册后，可以像如下代码以自定义attribute的形式传递数据给它

03组件间进行通讯

组件间进行通讯在app组件中，通过使用Course组件对应的name属性进行数据的传递，即可完成组件间通讯。

THANKYOU深圳市信息职业技术学院