uniapp中使用selectComponent

已于 2022-11-22 10:06:04 修改
阅读量2.9k 收藏 1
点赞数
文章标签： uni-app
于 2022-11-19 22:23:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YZ_ZZZ24/article/details/127943055
版权 
selectComponent：selectComponent('.class') // 返回组件的实例
selectComponent获取的是在globalStyle或是pages每个页面中注册的组件实例

1："globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"usingComponents": {
			"wxml-to-canvas": "/wxcomponents/wxml-to-canvas/index",
			"content": "/pages/selectComponentApi/components/content/index"
		}
	},


2："pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "canvas",
                "usingComponents": {
			        "wxml-to-canvas": "/wxcomponents/wxml-to-canvas/index"
		        }
			}
		},
		
],
页面中获取组件实例

// html
<wxml-to-canvas
   class="widget"
   id="widget"
   :width="canvasWidth"
   :height="canvasHeight"
 />


// js 
onLoad() {
    this.init()
  },
  methods: {
    async init() {
      setTimeout(() => {
        this.widget = this.selectComponent(".widget") // 需要延迟
      }, 1000)
    },
  },

普通的组件引用无法用selectComponent获取组件实例

朝朝朝朝ZZZ
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-app实现select标签功能
04-27
在uni-app中实现类似html的select标签功能。选中数据后，会在下面显示出所选的数据，点删除之后，对应的选中状态也清除
uniapp中使用EelementPlus，uniapp中使用EelementPlus
02-04
uniapp中使用EelementPlus，uniapp中使用EelementPlus
微信小程序转uniapp：3）微信this.selectComponent获取组件实例不适用uniapp。
sziitjin的博客
11-17 5530
在使用微信小程序获取子组件实例对象时，我们通常会使用this.selectComponent("#id")，然而在uniapp上是无法获取到组件对象的。该如何解决这个问题呢？我推荐大家使用 $refs ，顺便介绍一下uni-app $refs的基本用法。 $refs的基本用法：一个对象(Object)，持有注册过 ref 特性 的所有 DOM 元素和组件实例。 简单的说就是通过ref="id"去注册组件，然后使用this.$refs.id获取组件的实例，进而可以使用组建的方法。 代码实现： 微信实
uniapp在vue3组合式写法中获取组件实例的正确姿势
最新发布
WZX2399的博客
04-19 454
有助于确保范围查询严格局限在Vue管理的响应式组件实例上，特别是这涉及到组件实例中的响应式数据。这可以防止潜在的问题，例如当查询依赖于组件数据的时候。在选项式写法中,in(this)需要指定它在哪个组件实例内部执行，这是为了确保查询的上下文正确。但是，一些情况可能需要的不仅是实例本身，也需要这个实例与Vue的响应式系统的连接。可以给你更严格的保障，特别是如果你需要依赖于响应式数据来进行选择器查询时。方法作为查询范围应该是足够的，因为无论如何它都将涉及到正确的组件实例。在大多数情况下，直接传入。
uni快速寻找到自己需要的uni-ui组件
weixin_45966674的博客
06-04 366
uni 开发中通过uni官网快速找到自己想要的uni-ui组件工具
IMWeb训练营-VUE-CustomSelectComponent
NC1995
04-22 369
VueJS 自定义组件<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <link href="css/style.css" rel="stylesheet"> </head> <body> <div id="app"> <h2>自定义组
微信小程序---组件通信---使用selectComponent获取组件实例
m0_48546501的博客
03-20 7053
微信小程序---组件通信---使用selectComponent获取组件实例
uniapp字体图标的使用
12-31
uniapp字体图标的使用
uniapp中使用mathJax解析数学公式
03-15
uniapp中使用mathJax解析数学公式，兼容App与H5
uniAPP使用sqlite数据库demo
04-01
uniAPP使用sqlite数据库demo
uniapp 表格的介绍和使用
11-17
uniapp 表格
uni-app 组件里面获取元素宽高的实现
01-21
遇到的问题：直接在组件的mounted里面创建选择器，获取元素的宽高，即使扔到定时器里面执行，还是偶尔会有获取不到的情况 解决办法： // 写法一： getDescBox() { uni.createSelectorQuery().in(this).select('.top .desc').boundingClientRect(result => { if (result) { console.log('==========',result) }else { this.getDescBox(); } }).exec(); }, // 写法二： g
uniapp小程序vue3获取dom实例createSelectorQuery
solocao的专栏
01-02 2867
需求，在页面中，有时需要获取渲染组件的长宽信息，可以使用。
技术点：uniapp,小程序：页面组件获取所在页面的实例，重写生命周期
Big_YiFeng的博客
08-19 1597
使用带来的好处： 不用一层层传递：页面组件可以直接获取到所在页面的实例上的数据，而不用通过prop一层层传下去，在页面组件所在的层级较深时极其好用 解耦：页面组件实现某些功能需要借助所在页面的生命周期钩子来进行一些操作的时候，使用该方法可以不用将处理的代码写在所在页面的钩子里，而是直接将代码写在页面组件里。 例如：视频组件在滑动到某个节点才开始自动播放，就需要所在页面的 onPageScroll钩子里面进行视频处理逻辑，这样复用性极低。而且耦合度比较高，而是用本技巧可以直接在本组件里写逻辑，而不用修改所在
百度智能小程序selectComponent使用注意事项
yangj0020的博客
11-04 491
通过id选择组件时，id不宜为纯数字，否则返回结果为undefined。 ????️：selectComponent(“#123”)； 宜：select Component(“#a123”)
微信小程序selectComponent的坑
xiuxiuxiubiubiubiu的博客
01-06 1万+
之前把selectComponent不能写到onLoad开发者工具里面运行完全没有问题， 后来线上测试一直页面报错。一直找不到原因。就用真机测试模式，发现selectComponent的结果是null。排查了很久以为是单词拼写错误，最后发现是小程序生命周期的原因。看下面官方的生命周期图。可以发现在onLoad的时候，页面开始创建，但是页面元素还没有渲染，而selectComponent这时获取不...
小程序使用selectComponent获取自定义组件时，返回null（分析和解决方法）
热门推荐
Honiler的博客
01-09 1万+
一、原因：        组件所在的布局层级不同，该组件被创建的时间会有所不同，意味着ready（组件生命周期函数，组件布局完成后执行）被调用的时间有所不同。由于组件创建完成的时间晚于页面创建完成，即组件生命周期函数的ready被执行的时间晚于页面生命周期函数的onReady，无论在页面生命周期的onLoad函数还是onReady函数中，组件还没有创建完成就使用selectComponent去获取...
Cannot read property 'init' of null 小程序中使用components方法selectComponent遇到的问题
牛哞哞杂记
09-20 7804
在小程序中使用components遇到了两个问题： 问题描述： Cannot read property ‘init’ of null ，为null 出现原因： 出现的原因是，我在wxml里有if判断，而此时num还没有等于1，所以造成null <ec-canvas wx:if="{{num==1}}" id="mychart" ec="{{ ec }}"> </ec-canva...
uniapp 中使用addEventListener
09-12
### 回答1： uniapp 中使用 addEventListener 方法可以给某个元素绑定事件监听。 使用方法： ``` document.getElementById("some-element").addEventListener("click", function() { // do something when the element is clicked }); ``` 注意：在 uniapp 中，需要在页面的 created 钩子函数中绑定事件监听，否则会报错。 例如： ``` Page({ created: function() { document.getElementById("some-element").addEventListener("click", function() { // do something when the element is clicked }); } }); ``` ### 回答2： 在uniapp中使用addEventListener可以通过以下几个步骤实现： 1. 首先，在需要使用addEventListener的组件页面中，找到需要监听事件的元素。可以通过使用selectComponent函数获取到对应元素的实例。 2. 在获取到元素实例后，可以使用uni.createSelectorQuery().in(this).select('.className')来获取到该元素的节点。 3. 接下来，使用节点的addEventListener方法可以给该元素绑定指定的事件，比如点击事件。 4. 在事件回调函数中，可以编写对应的逻辑代码来处理事件触发后的操作。 5. 最后，为了避免内存泄漏，需要在组件销毁时，使用removeEventListener方法进行事件的解绑。 以下是一个使用addEventListener的示例代码： ``` // 在页面中引入需要使用的组件 import uni from 'uni-app'; export default { data() { return { myElement: null } }, mounted() { // 获取元素实例 this.myElement = uni.createSelectorQuery().in(this).select('.my-element'); // 给元素绑定点击事件 this.myElement.addEventListener('click', this.handleClick); }, methods: { handleClick() { // 点击事件触发后的处理逻辑 console.log('点击了元素'); } }, beforeDestroy() { // 在组件销毁时解绑事件 this.myElement.removeEventListener('click', this.handleClick); } } ``` 以上就是在uniapp中使用addEventListener的基本方法，通过这种方式可以方便地监听和处理元素的事件。 ### 回答3： 在uniapp中使用addEventListener函数的方法如下： 首先，在uniapp的页面组件中，可以通过以下步骤使用addEventListener函数： 1. 在页面的`onLoad`生命周期函数中，获取需要绑定事件的DOM元素节点，通常可以使用`uni.createSelectorQuery()`方法获取到DOM元素节点的引用。 2. 使用获取到的DOM元素节点调用`addEventListener`函数，该函数的第一个参数是要绑定的事件类型，比如`click`、`touchstart`等，第二个参数是事件的监听函数。 以下是一个示例代码： ```javascript export default { onLoad() { uni.createSelectorQuery() .select('#myButton') // 获取需要绑定事件的DOM元素节点 .then((res) => { res.node.addEventListener('click', this.handleClick) // 使用addEventListener绑定点击事件 }) }, methods: { handleClick() { console.log('按钮被点击了') } } } ``` 这样就完成了在uniapp中使用addEventListener的操作。需要注意的是，如果绑定的是一个自定义组件的事件，需要将`select`方法的参数设置为组件实例引用，并通过实例引用调用`addEventListener`函数。 另外，为了防止事件重复绑定，在页面的`onUnload`生命周期函数中，需要调用`removeEventListener`函数来解除事件绑定，避免内存泄漏。 ```javascript export default { onUnload() { uni.createSelectorQuery() .select('#myButton') .then((res) => { res.node.removeEventListener('click', this.handleClick) // 使用removeEventListener解除事件绑定 }) }, methods: { handleClick() { console.log('按钮被点击了') } } } ``` 以上就是在uniapp中使用addEventListener函数的过程和注意事项。使用这种方式，我们可以方便地在uniapp中实现各种事件的监听和处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值