| 微信小程序 component组件的使用 以及 传值 | 您所在的位置：网站首页 › 微信小程序数据监听怎么设置的 › 微信小程序 component组件的使用 以及 传值 |
微信小程序 component组件的使用 以及 传值
|
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中的 "组件标签" 添加 键值对 , 键为 : 传过去的数据 名称 , 值为 : 传过去的数据 在组件 js中的 properties方法中 添加 对象 , 对象名为 : 父页面传来的数据名称 , 对象type为 : 数据 的 数据类型 properties: { fromFather: { type: String, value: "" }, },组件的 wxml 中，之间展示数据名即可 {{fromFather}}
5、组件 --传值--> 页面 子组件 在事件中 , 使用 this.triggerEvent ( '参数一' , { 参数二 } ) 传值给页面. 参数一为 : 传过去的方法 名称 , 参数二为 : 传过去的数据 ( 以键值对的形式 ) 点击传数据给页面 methods: { editSonData(){ this.triggerEvent ( 'fromSon' , {name:'路西德'} ) } },在 父页面wxml中的 "组件标签" 添加 bind事件 ( bind + 子组件传来的方法名称="方法名" ) , 再在 js 文件中 添加事件的方法 , e . detail 能获取到 子组件传来的数据 editData(e){ console.log(e.detail.name)//路西德 },
|
【本文地址】
公司简介
联系我们
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |