1、创建组件
- 在根目录创建一个components文件夹用来存放所有自定义的组件。
- 在components文件夹下创建一个新文件夹,在这个文件夹下定义组件。
- 新文件夹在新文件夹下新建一个component组件。
- 在组件的.json文件中将component属性定义为true,声明这是一个组件。(第三步创建component页面时会自动生成)
2、在父页面中使用组件
- 父组件的.json文件中,在usingComponents属性下定义一个组件名用来在页面中使用。
- 在父页面中将定义的组件名以标签的形式使用。
3、将父页面的数据传给子组件
-
在父页面.js中定义一个变量。
-
将父组件定义的数据绑定一个自定义属性在组件上。
-
将父页面定义的属性在子组件声明数据类型。
-
然后就能在组件中使用父组件的数据了。
4、将子组件的数据传给父页面
-
在子组件定义一个数据。
-
在父页面使用的子组件标签内自定义一个事件用来调用父组件的方法。
-
在子组件的事件内使用this.triggerEvent('父组件事件名', {})调用父页面的事件将数据进行发送。
-
在父页面的事件内接收子组件的数据。
5、完成
- 在子组件定义的数据可以在父页面使用。