Uso básico de $refs en VUE

Hay tres usos de ref:
1. Agregue ref a elementos ordinarios y use this.$refs.(ref value) para obtener elementos DOM

2. La referencia se agrega al componente secundario y la instancia del componente se obtiene utilizando this.refs.(valor de referencia), y se pueden usar todos los métodos del componente. Al usar el método, directamente this.refs.(ref value) obtiene la instancia del componente, y puede usar todos los métodos del componente. Al usar el método, this.refs.(valor de referencia) obtiene directamente la instancia del componente, y se pueden usar todos los métodos del componente. Cuando se usa el método, se puede usar directamente this.refs.(ref value).method().

3. Cómo usar v-for y ref para obtener un conjunto de nodos de matriz o dom

Errores que deben tenerse en cuenta:
1. Si desea agregar una referencia diferente a través de v-for transversal, recuerde agregar el signo :, es decir: ref = una variable, esto es lo mismo que otros atributos,
si es un atributo fijo valor, no necesita agregar el signo:, si es una variable, recuerde agregar: signo. (El que tiene dos puntos indica que lo siguiente es una variable o expresión; el que no tiene dos puntos es la constante de cadena correspondiente (String))

2. Agregue ref a través de: ref = una variable (es decir, agregue el: número), si desea obtener la referencia, debe agregar [0], como this.refs [ refs A array I tem ] [ 0 ]; si no: ref = Si el método de una determinada variable es ref = una determinada cadena, no hay necesidad de agregarlo, como este .refs[refsArrayItem] [0];Como este.refs[refsArrayItem][ 0]; si no es la forma de: ref=una determinada variable pero ref=una determinada cadena, no hay necesidad de agregarlo, como this.refs[refsArrayItem].

1. ref debe estar disponible después de que se complete la representación del dom. Al usarlo, asegúrese de que el dom se haya procesado. Por ejemplo, llámelo en el enlace de ciclo de vida montado(){}, o llámelo en this.$nextTick(()=>{}).

2. Si la referencia está en bucle y hay varios nombres duplicados, entonces el valor de la referencia será una matriz. En este momento, solo necesita hacer un bucle para obtener una única referencia.

añadir atributo de referencia

<div id="app">
    <h1 ref="h1Ele">这是H1</h1>
    <hello ref="ho"></hello>
 
    <button @click="getref">获取H1元素</button>
</div>
获取注册过 ref 的所有组件或元素
methods: {
        getref() {
          // 表示从 $refs对象 中, 获取 ref 属性值为: h1ele DOM元素或组件
           console.log(this.$refs.h1Ele.innerText);
           this.$refs.h1ele.style.color = 'red';// 修改html样式
 
          console.log(this.$refs.ho.msg);// 获取组件数据
          console.log(this.$refs.ho.test);// 获取组件的方法
        }
      }

Código Vue:

 <el-table @sort-change="sortChange" ref="multipleSelection" border :data="valueDryGoodTableData" style="width: 100%">
                    <el-table-column align="left" prop="title" label="标题" min-width="80%" sortable="custom">
                        <template slot-scope="scope">
                            <a target="_blank" :class="scope.row.titleClicked?'titleClicked':''" class="hoverHand bluetext" v-html="scope.row.title" @click="titleClick(scope.row.articleUrl,scope.$index)">
                            </a>
                        </template>
                    </el-table-column>
                    <el-table-column align="left" prop="releaseTime" label="发布日期" min-width="11%" sortable="custom"></el-table-column>
                    <el-table-column align="center" label="操作" min-width="9%">
                        <template slot-scope="scope">
                            <span class="operatoryTools">
                                <i title="取消收藏" v-if="scope.row.isFavour" @click="favoriteOperating(scope.row.id, scope.$index)" class="hoverHand iconStyle el-icon-star-on"></i>
                                <i title="收藏" v-else @click="favoriteOperating(scope.row.id, scope.$index)" class="hoverHand iconStyle el-icon-star-off"></i>
                                <i title="分享" @click.stop="showShareOperation(scope.$index)" class="shareTarg iconfont">&#xe678;</i>
                                <div class="share" v-if="scope.row.showShare">
                                    <img class="hoverHand shareItem" title="分享到微博" @click="shareItem('sina',$event);" src="@/images/WEIBO.png">
                                    <img class="hoverHand shareItem" title="分享到微信" @click.stop="shareItem('wx',$event);" src="@/images/WEIXIN.png">
                                    <img class="hoverHand shareItem" title="分享到QQ" @click="shareItem('qq',$event);" src="@/images/QQ.png">
                                </div>
                                <div v-show="scope.row.erweimaShare" class="erweima_share"></div>
                                <div v-show="scope.row.erweimaShare1" class="erweima_share1"></div>
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
JS代码：

//点击清空条件，调用该方法
emptyAndSearch(){//清空条件方法
			//清空树选中状态
			this.clearTreeNodeCheck(['tree']);
			//清除排序
			this.$refs.multipleSelection.clearSort();
			//设置分页参数
			this.queryParam = {
				startRow : 1,
                pageSize : 20,
                condition:{
                }
			}
			//分页查询调用
			this.confirmSearch('statistics');
			//设置清空条件为false
			this.$store.commit('valueDryGoodDatas/SET_CLEAR_ALL',false);
		}

En términos generales, si desea obtener el cuadro INPUT, primero obtenga el elemento DOM, necesita document.querySelector (".input1") para obtener el nodo dom y luego obtenga el valor de input1.

Pero después de vincular con ref, no necesitamos obtener el nodo dom, solo vincular input1 a la entrada anterior y luego llamarlo en $refs.

Luego llámelo así en javascript: this.$refs.input1 Esto puede reducir el consumo de obtener nodos dom