vue.js组件和传值以及微信小程序组件和传值

一.微信小程序组件引用

1.创建组件Component

 创建dx.js为子组件

2.页面组件引用

  先创建parent父组件页面, 在parent.json中注册组件

"usingComponents": {"component-tag-dx" : "/pages/shengyi/dx/dx",},

在parent.wxml中引用

<component-tag-dx ></component-tag-dx>

3.组件传值

3.1 父视图传值到子组件 （父---->子）

在子组件中dx.js声明要接受的参数

// 这是子组件dx.js
Component({// 组件的属性列表properties: {// 例如滚动视图高度scrollViewH: {type: String,value: '100%'},}
})// 在接受到值以后可以直接在dx.wxml中使用，同样也可以直接通过this.properties.scrollViewH获取到该值

在父组件中进行传值

<!-- 这是父组件parent.wxml -->
<component-tag-dx scrollViewH="90%"></component-tag-dx>

3.2 子组件传值给父组件 (子---->父)

 需要再子组件中通过triggerEvent方法进行传值

methods: {//子组件 发生点击事件时触发handleItemTap (e) {// 1 获取点击的索引const { index } = e.currentTarget.dataset;// 2 触发 父组件中的事件，传递数据给父组件  把当前点击的index数据传给父组件this.triggerEvent("tabsItemChange", { index: index });}

在父组件中需要通过bind绑定子组件返回的这个方法，进而拿到传过来的数据

<component-tag-dx bind:tabsItemChange="tabsItemChange" scrollViewH="90%"></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说明父组件点击了第一个按钮（按钮1）if (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-dx>

4. 界面之间的传值

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></basics>

2. 组件的传值

uniapp组件传值官网： https://uniapp.dcloud.net.cn/tutorial/vue-components.html

2.1 父组件传值到子组件

 /******  这是父组件的html *******/ // ReceivingCommissionOne是引用的子组件
<ReceivingCommissionOne :disposeCode="disposeCode"</ReceivingCommissionOne>/I****** 在子组件中声明要接收的属性 *******/ 
export default {props: {// 编码disposeCode: {type: String,default: ''},},mounted() {console.log(this.disposeCode)},
}

2.2 子组件传值或者方法到父组件

/*******  这是子组件  ***********/
// 这是某一个按钮的点击事件
backList() {// {} 可以携带任意参数this.$emit('backList', {})
},/*******  这是父组件的html  ***********/
<ReceivingCommissionOne  @backList="backList" :disposeCode="disposeCode" </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的组件传值