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

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

  • 一.微信小程序组件引用
    • 1.创建组件Component
    • 2.页面组件引用
    • 3.组件传值
      • [3.1 父视图传值到子组件 (父---->子)](#3.1 父视图传值到子组件 (父---->子))
      • [3.2 子组件传值给父组件 (子---->父)](#3.2 子组件传值给父组件 (子---->父))
      • [3.3 父组件方法传递到子组件](#3.3 父组件方法传递到子组件)
    • [4. 界面之间的传值](#4. 界面之间的传值)
      • [4.1 正向传值](#4.1 正向传值)
      • [4.2 反向传值](#4.2 反向传值)
  • [二. uniapp组件的引用](#二. uniapp组件的引用)
    • [1. 组件创建以及引用](#1. 组件创建以及引用)
    • [2. 组件的传值](#2. 组件的传值)
      • [2.1 父组件传值到子组件](#2.1 父组件传值到子组件)
      • [2.2 子组件传值或者方法到父组件](#2.2 子组件传值或者方法到父组件)
    • [3. 页面传值](#3. 页面传值)
      • [3.1 页面正向传值](#3.1 页面正向传值)
      • [3.2 反向传值](#3.2 反向传值)
  • 总结

一.微信小程序组件引用

1.创建组件Component

 创建dx.js为子组件

2.页面组件引用

  先创建parent父组件页面, 在parent.json中注册组件
javascript 复制代码
"usingComponents": {
    "component-tag-dx" : "/pages/shengyi/dx/dx",
  },

在parent.wxml中引用

html 复制代码
<component-tag-dx ></component-tag-dx>

3.组件传值

3.1 父视图传值到子组件 (父---->子)

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

javascript 复制代码
// 这是子组件dx.js
Component({
  // 组件的属性列表
  properties: {
	// 例如滚动视图高度
    scrollViewH: {
      type: String,
      value: '100%'
    },
  }
})

// 在接受到值以后可以直接在dx.wxml中使用,同样也可以直接通过this.properties.scrollViewH获取到该值

在父组件中进行传值

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

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

 需要再子组件中通过triggerEvent方法进行传值
javascript 复制代码
methods: {
  //子组件 发生点击事件时触发
  handleItemTap (e) {
    // 1 获取点击的索引
    const { index } = e.currentTarget.dataset;
    // 2 触发 父组件中的事件,传递数据给父组件  把当前点击的index数据传给父组件
    this.triggerEvent("tabsItemChange", { index: index });
  }

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

html 复制代码
<component-tag-dx bind:tabsItemChange="tabsItemChange" scrollViewH="90%"></component-tag-dx>
javascript 复制代码
 // 获取从子组件传回来的数据
  tabsItemChange (e) {
    //  获取子组件传过来的数据
    const name = e.detail 
  },

3.3 父组件方法传递到子组件

	例如: 
	父组件中有3个按钮可以进行切换(按钮1,按钮2, 按钮3)
	我需要在父组件中点击这3个按钮,把方法传递到子组件中
	当子组件监听到父组件点击以后,子组件接收方法并且进行页面刷新操作

 	实现:
 	子组件无法监听父组件的方法,父组件也无法把方法传递到子组件中,只能通过传值到子组件
 	然后子组件监听值的改变来判断父组件是否进行了点击
javascript 复制代码
// 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个按钮点击的索引
javascript 复制代码
  // 这个方法是3个按钮点击事件
  tabClick(e) {
    let index = e.currentTarget.dataset.index
    this.setData({
      currentClickIndex: index
    })
  },
html 复制代码
<!-- 把点击事件的索引传递过去 -->
<component-tag-dx parentIndex="{{currentClickIndex}}"></component-tag-dx>

4. 界面之间的传值

4.1 正向传值

javascript 复制代码
// 正向传值,可以直接从URL中进行拼接,
// 但是如果传递复杂的对象,或者参数较多时,采用这种方式
// 这是页面 A
 wx.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 反向传值

javascript 复制代码
	// 这是页面 A
    wx.navigateTo({
      url: '页面B路径',
      events: {
       // 此处用来监听页面B的回调值
        someEvent: function (data) {
          let item = that.data.curretItem
          let index = that.data.curretItemIndex
        },
      }
    })

	// 这是页面 B,在onLoad方法中实现就行
	Page({
      onLoad: function(option){
    	const eventChannel = this.getOpenerEventChannel()
    	// 把值反向传给界面A
    	eventChannel.emit('someEvent', {data: 'test'});
     }
   })
   // 注意如果是需要点击某个按钮返回,那可以把这个方法放到按钮的点击事件中

二. uniapp组件的引用

1. 组件创建以及引用

 直接可以右键创建组件vue,组件可以不注册到page.json界面
javascript 复制代码
// 这里父组件.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 父组件传值到子组件

javascript 复制代码
 /******  这是父组件的html *******/ 
 // ReceivingCommissionOne是引用的子组件
<ReceivingCommissionOne :disposeCode="disposeCode"</ReceivingCommissionOne>



/I****** 在子组件中声明要接收的属性 *******/ 
export default {
	props: {
		// 编码
		disposeCode: {
		   type: String,
		   default: ''
	   },
	},
	mounted() {
	  console.log(this.disposeCode)
   },
}
			
		

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

javascript 复制代码
/*******  这是子组件  ***********/
// 这是某一个按钮的点击事件
backList() {
   // {} 可以携带任意参数
   this.$emit('backList', {})
},



/*******  这是父组件的html  ***********/
<ReceivingCommissionOne  @backList="backList" :disposeCode="disposeCode" </ReceivingCommissionOne>
// 实现方法:		
backList(data) {}


	

3. 页面传值

3.1 页面正向传值

javascript 复制代码
/****** 这是页面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 反向传值

javascript 复制代码
/****** 这是页面1 ******/
nextPage() {
  uni.navigateTo({
	url: '页面B路径',
	events: {
    // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
    someEvent: function(data) {
      console.log(data)
    }
  },
  })
}


/****** 这是页面2接收 ******/
onLoad(open) {
	// 传值给界面1
	const eventChannel = this.getOpenerEventChannel()
	eventChannel.emit('someEvent', {data: 'data from test page for someEvent'});
}

总结

只是平时工作中记录小程序与uniapp的组件传值
相关推荐
井眼28 分钟前
微信小程序-prettier 格式化
微信小程序·小程序
活宝小娜1 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点1 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow1 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
刚刚好ā2 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
qq_17448285753 小时前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_9922502773 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
会发光的猪。5 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客5 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
周全全5 小时前
Spring Boot + Vue 基于 RSA 的用户身份认证加密机制实现
java·vue.js·spring boot·安全·php