1、创建component组件
2、component.js 中的说明
Component({ /** * 组件的属性列表(对外属性),属性设置中可包含三个字段,type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数 */ properties: { }, /** * 组件的初始数据(内部数据),和 properties 一同用于组件的模版渲染 */ data: { }, /** * 组件的方法列表,包括事件响应函数和任意的自定义方法 */ methods: { }, created: function () { // 组件生命周期函数,在组件实例进入页面节点树时执行,注意此时不能调用setData(节点树还未导入, 无法使用setData) console.log(\'Component-1 >> created\'); }, attached: function () { // 组件生命周期函数,在组件实例进入页面节点树时执行。可以使用setData来初始化数据,但无法操作节点 console.log(\'Component-1 >> attached\'); }, ready: function () { // 在组件布局完成后执行,可以获取到节点信息也可以操作节点 console.log(\'Component-1 >> ready\'); }, moved: function () { // 在组件实例被移动到节点树另一个位置时执行 console.log(\'Component-1 >> moved\'); }, detached: function () { // 在组件实例被从页面节点树移除时执行 console.log(\'Component-1 >> detached\'); }, lifetimes: { // 组件生命周期声明对象,将组件的生命周期收归到该字段进行声明, //原有声明方式仍旧有效,如同时存在两种声明方式,则lifetimes字段内声明方式优先级最高 created: function () { console.log(\'Component-1 lifetimes >> created\'); }, attached: function () { console.log(\'Component-1 lifetimes >> attached\'); }, ready: function () { console.log(\'Component-1 lifetimes >> ready\'); }, moved: function () { console.log(\'Component-1 lifetimes >> moved\'); }, detached: function () { console.log(\'Component-1 lifetimes >> detached\'); } }, pageLifetimes: { // 组件所在页面的生命周期声明对象,目前仅支持页面的show和hide两个生命周期 show: function () { console.log(\'Component-1 pageLifetimes >> Show\'); }, hide: function () { console.log(\'Component-1 pageLifetimes >> Hide\'); } } })
3、页面中引入组件,在需要引入组件的页面json文件中引入组件
"usingComponents": { "popup":"../components/popup/popup" },
4、页面 --传值--> 组件
给 页面wxml中的 "组件标签" 添加 键值对 , 键为 : 传过去的数据 名称 , 值为 : 传过去的数据
<popup fromFather="\'我是来自页面的数据\'"></popup>
在组件 js中的 properties方法中 添加 对象 , 对象名为 : 父页面传来的数据名称 , 对象type为 : 数据 的 数据类型
properties: { fromFather: { type: String, value: "" }, },
组件的 wxml 中,之间展示数据名即可
<text>{{fromFather}}</text>
5、组件 --传值--> 页面
子组件 在事件中 , 使用 this.triggerEvent ( \'参数一\' , { 参数二 } ) 传值给页面.
参数一为 : 传过去的方法 名称 , 参数二为 : 传过去的数据 ( 以键值对的形式 )
<button bindtap="editSonData">点击传数据给页面</button>
methods: { editSonData(){ this.triggerEvent ( \'fromSon\' , {name:\'路西德\'} ) } },
在 父页面wxml中的 "组件标签" 添加 bind事件 ( bind + 子组件传来的方法名称="方法名" ) ,
<popup bind:fromSon="editData"></popup>
再在 js 文件中 添加事件的方法 , e . detail 能获取到 子组件传来的数据
editData(e){ console.log(e.detail.name)//路西德 },
请发表评论