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.index
    this.setData({
      currentClickIndex: index
    })
  },

<!-- 把点击事件的索引传递过去 -->
<component-tag-dx parentIndex="{{currentClickIndex}}"></component-tag-dx>

4. 界面之间的传值

4.1 正向传值

// 正向传值，可以直接从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 反向传值

// 这是页面 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界面

// 这里父组件.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) {
// 传值给界面1
const eventChannel = this.getOpenerEventChannel()
eventChannel.emit('someEvent', {data: 'data from test page for someEvent'});
}

总结

只是平时工作中记录小程序与uniapp的组件传值

原文地址：https://blog.csdn.net/wds326598/article/details/143589712

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！