组件标志

开发者会遇到很多与组件标志有关的概念：id、ref、Element、NodeRef、context、ComponentPublicInstance...

上述概念，其实都是为了给组件一个标记，通过标记拿到组件的上下文对象，然后操作这个对象的方法。

但因为平台不同，制造了不同的概念。id在web和小程序中存在，ref是vue的概念。uni-app中这些皆而有之。

我们以video为例，解释这些概念的相同和差别之处。

web开发中

内置html标签

html内置标签有id属性，通过document.getElmenetById("")可以返回一个Element。可以进一步调用Element的方法

<video id="vid" src="uni.mp4"></video>
<script>
    document.getElementById("vid").play() //js写法
	(document.getElementById("vid") as HTMLVideoElement).play(); //ts写法。只有HTMLVideoElement才有play方法
</script>

vue自定义组件

vue框架中组件有ref属性，通过this.refs可以返回一个组件实例ComponentPublicInstance。可以进一步调用组件的方法。

对于html内置元素，在web中一般不通过ref获取。ref更多是服务于自定义的vue组件。

假使有一个vue组件，其有一个方法getSome()，那么用法是：
template区：

<component1 ref="c1"></component1>

scrip区：

this.$refs.c1.getSome() //js写法
this.$refs["c1"].getSome() //与上一行等价
(this.$refs["c1"] as ComponentPublicInstance).getSome() //ts或uts写法，必须明确类型才能调用其方法和属性

小程序中

小程序内置组件

小程序的内置组件有id属性，有多种方式获取组件上下文对象：

1. 通过uni.createXXXContext来获取，比如uni.createVideoContext() template区：

<video id="vid" src="uni.mp4"></video>

scrip区：

uni.createVideoContext('vid').play()

2. 通过uni.createSelectorQuery()，传入选择器，拿到返回的NodesRef，然后再.context，异步获取到组件的上下文对象

  uni.createSelectorQuery().select('.the-video-class').context(function(res){
    console.log(res.context) // 节点对应的 Context 对象。如：选中的节点是 <video> 组件，那么此处即返回 VideoContext 对象
  }).exec()

vue自定义组件

uni-app编译到小程序时，vue组件的用法与web相同，具体见上。

uni-app x中

uni-app x中，web、小程序、vue这3类概念都支持，所以id、ref、Element、NodeRef、context、ComponentPublicInstance这些概念都存在。

分为如下几类：

内置组件

内置组件都支持Element。

为了与小程序api拉齐，也有部分组件同时支持context，如video。

不涉及小程序api拉齐的一些组件未提供context，比如<unicloud-db>组件只有Element。

Element方式

uni-app x提供了uni.getElementById方法，返回的是Element类型。

通用的元素操作方法，比如getAttribute、setStyle，在Element上就可以操作。

但是由于本方法不与页面绑定，获取的是栈顶页面的element，所以可能发生预期外的情况，详见

UniVideoElement 继承自 Element，拥有video专用的一批方法。

template区：

<video id="vid" src="uni.mp4"></video>

script区：

(uni.getElementById("vid") as UniVideoElement).play() //注意没有document对象，getElementById方法在uni下。务必确保vid存在，否则as会崩溃
uni.getElementById<UniVideoElement>("vid")!.play() //泛型写法

context方式

script区：

uni.createVideoContext("vid")!.play()

NodeRef方式

uni-app x 虽然支持 uni.createSelectorQuery() API，传入选择器，可以拿到返回的NodesRef。但无法继续获取.context子对象。无法通过这种方式拿到context。

ref方式

其实this.$refs获取到的内置组件，通过as也可以转换为Element。

与uni.getElementById相比，this.$refs方式与调用页面绑定，日常更推荐使用。

script区：

(this.$refs['vid'] as UniVideoElement).play(); //但一般ref用于vue自定义组件

vue自定义组件

uni-app x中vue组件的用法与web相同，具体见上。