网站怎么做下载内容,网盟推广是什么,搭建广告网站费用,企业信息平台系统微信小程序组件以及vue.js组件 一.微信小程序组件引用1.创建组件Component2.页面组件引用3.组件传值3.1 父视图传值到子组件 #xff08;父----子#xff09;3.2 子组件传值给父组件 (子----父)3.3 父组件方法传递到子组件 4. 界面之间的传值4.1 正向传值4.2 反向传值… 微信小程序组件以及vue.js组件 一.微信小程序组件引用1.创建组件Component2.页面组件引用3.组件传值3.1 父视图传值到子组件 父----子3.2 子组件传值给父组件 (子----父)3.3 父组件方法传递到子组件 4. 界面之间的传值4.1 正向传值4.2 反向传值 二. uniapp组件的引用1. 组件创建以及引用2. 组件的传值2.1 父组件传值到子组件2.2 子组件传值或者方法到父组件 3. 页面传值3.1 页面正向传值3.2 反向传值 总结 一.微信小程序组件引用
1.创建组件Component 创建dx.js为子组件2.页面组件引用 先创建parent父组件页面, 在parent.json中注册组件usingComponents: {component-tag-dx : /pages/shengyi/dx/dx,},在parent.wxml中引用
component-tag-dx /component-tag-dx3.组件传值
3.1 父视图传值到子组件 父----子
在子组件中dx.js声明要接受的参数
// 这是子组件dx.js
Component({// 组件的属性列表properties: {// 例如滚动视图高度scrollViewH: {type: String,value: 100%},}
})// 在接受到值以后可以直接在dx.wxml中使用同样也可以直接通过this.properties.scrollViewH获取到该值在父组件中进行传值
!-- 这是父组件parent.wxml --
component-tag-dx scrollViewH90%/component-tag-dx3.2 子组件传值给父组件 (子----父) 需要再子组件中通过triggerEvent方法进行传值methods: {//子组件 发生点击事件时触发handleItemTap (e) {// 1 获取点击的索引const { index } e.currentTarget.dataset;// 2 触发 父组件中的事件传递数据给父组件 把当前点击的index数据传给父组件this.triggerEvent(tabsItemChange, { index: index });}在父组件中需要通过bind绑定子组件返回的这个方法进而拿到传过来的数据
component-tag-dx bind:tabsItemChangetabsItemChange scrollViewH90%/component-tag-dx// 获取从子组件传回来的数据tabsItemChange (e) {// 获取子组件传过来的数据const name e.detail },3.3 父组件方法传递到子组件 例如 父组件中有3个按钮可以进行切换(按钮1按钮2 按钮3)我需要在父组件中点击这3个按钮把方法传递到子组件中当子组件监听到父组件点击以后子组件接收方法并且进行页面刷新操作实现子组件无法监听父组件的方法父组件也无法把方法传递到子组件中只能通过传值到子组件然后子组件监听值的改变来判断父组件是否进行了点击// dx.js子组件Component({
properties:{// 1.首先接收父组件传递过来的值parentIndex: {type: String,value: }
},
observers:{// 2. 在监听值是否发生了改变parentIndex: function (index) {// 如果index 0说明父组件点击了第一个按钮按钮1if (index 0) {// 在这里执行操作this.setData({triggered: true,})}}
}})父组件中需要做的操作在parent.js中拿到3个按钮点击的索引// 这个方法是3个按钮点击事件tabClick(e) {let index e.currentTarget.dataset.indexthis.setData({currentClickIndex: index})},!-- 把点击事件的索引传递过去 --
component-tag-dx parentIndex{{currentClickIndex}}/component-tag-dx4. 界面之间的传值
4.1 正向传值
// 正向传值可以直接从URL中进行拼接
// 但是如果传递复杂的对象或者参数较多时采用这种方式
// 这是页面 Awx.navigateTo({url: 页面B路径,success: function(res) {// 通过eventChannel向被打开页面传送数据res.eventChannel.emit(acceptDataFromOpenerPage, { data: test })}})// 页面B接收
Page({onLoad: function(option){const eventChannel this.getOpenerEventChannel()// 监听acceptDataFromOpenerPage事件获取上一页面通过eventChannel传送到当前页面的数据eventChannel.on(acceptDataFromOpenerPage, function(data) {console.log(data)})}
})4.2 反向传值 // 这是页面 Awx.navigateTo({url: 页面B路径,events: {// 此处用来监听页面B的回调值someEvent: function (data) {let item that.data.curretItemlet index that.data.curretItemIndex},}})// 这是页面 B,在onLoad方法中实现就行Page({onLoad: function(option){const eventChannel this.getOpenerEventChannel()// 把值反向传给界面AeventChannel.emit(someEvent, {data: test});}})// 注意如果是需要点击某个按钮返回那可以把这个方法放到按钮的点击事件中二. uniapp组件的引用
1. 组件创建以及引用 直接可以右键创建组件vue组件可以不注册到page.json界面// 这里父组件.vue
// 通过路径导入组件
import basics from ../components/CreatBasics;
export default {// 注册组件,注意不要用bas-ics这种格式注册components: {basics: basics},
}
// 在html中直接引用
// basics/basics2. 组件的传值
uniapp组件传值官网 https://uniapp.dcloud.net.cn/tutorial/vue-components.html2.1 父组件传值到子组件 /****** 这是父组件的html *******/ // ReceivingCommissionOne是引用的子组件
ReceivingCommissionOne :disposeCodedisposeCode/ReceivingCommissionOne/I****** 在子组件中声明要接收的属性 *******/
export default {props: {// 编码disposeCode: {type: String,default: },},mounted() {console.log(this.disposeCode)},
}
2.2 子组件传值或者方法到父组件
/******* 这是子组件 ***********/
// 这是某一个按钮的点击事件
backList() {// {} 可以携带任意参数this.$emit(backList, {})
},/******* 这是父组件的html ***********/
ReceivingCommissionOne backListbackList :disposeCodedisposeCode /ReceivingCommissionOne
// 实现方法:
backList(data) {}
3. 页面传值
3.1 页面正向传值
/****** 这是页面1 ******/
nextPage() {uni.navigateTo({url: 页面B路径,success: (succ) {// 在成功的方法中传值{}succ.eventChannel.emit(changeEdit, {dataDetail: text})}})
}/****** 这是页面2接收 ******/
onLoad(open) {// 接收页面的值const eventChannel this.getOpenerEventChannel()eventChannel.on(changeEdit, function(data) {}
}3.2 反向传值
/****** 这是页面1 ******/
nextPage() {uni.navigateTo({url: 页面B路径,events: {// 为指定事件添加一个监听器获取被打开页面传送到当前页面的数据someEvent: function(data) {console.log(data)}},})
}/****** 这是页面2接收 ******/
onLoad(open) {// 传值给界面1const eventChannel this.getOpenerEventChannel()eventChannel.emit(someEvent, {data: data from test page for someEvent});
}
总结
只是平时工作中记录小程序与uniapp的组件传值
