Vue3.x ref属性

获取DOM或者组件实例可以使用ref属性，写法和vue20需要区分开 。

总结：

1Vue2中可以通过ref直接 *** 作单个DOM和组件 this$refsinfoinnerHTML

2Vue2中可以批量通过ref *** 作DOM和组件 this$refsfruit[0]innerHTML

vue30里面模板的ref是跟着定义走的（先定义再使用， 模板中的名字和定义的名字要一致 ）先返回再使用

vue20里面的使用是跟着模板走（先模板中用，然后根据模板使用ref， 获取DOM的ref要和模板的一样 ）

总结： *** 作单个DOM或者组件的流程

1定义一个响应式变量

2把变量返回给模板使用

3模板中绑定上述返回的数据

4可以通过info变量 *** 作DOM或者组件实例

1定义 *** 作DOM的函数----通过形参获取单个DOM元素

总结： ref批量 *** 作元素的流程

1定义一个 *** 作DOM的函数

2把该函数绑定到模板上（ 必须动态绑定 ）

3在函数中可以通过参数得到单个元素，这个元素一般可以放到数组中

4通过上述数组即可 *** 作批量的元素

ref将setup函数声明的变量变为响应式，包含且仅有一个value属性

reactive对应的是一个对象内部所有元素的双向绑定，ref是对某一个数据类型的单独双项绑定

不使用ref

使用ref

ref 目前使用过的三种方式：

1、在html的元素中使用rel，可在js中直接调用该元素，用this$refs（ref值） 获取到的是dom元素

2、在vue的组件上加rel，可在js中直接使用该组件包括该组件的方法，用this$refs（ref值）方法名()

3、在v-for的循环列中使用rel

避坑：

v-for中使用rel需要绑定 变量 ，即v-bind:rel='变量名'

ref 需要在dom渲染完成后才会有 ，在使用的时候确保dom已经渲染完成。比如在生命周期  mounted(){} 钩子中调用 ，或者 在 this$nextTick(()=>{}) 中调用 。

如果rel循环未绑定变量，那就$refs获取获取数组再循环得到使用即可

例子1：在html元素上使用

<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元素

          consolelog(this$refsh1eleinnerText);

          this$refsh1elestylecolor = 'red';// 修改html样式

          consolelog(this$refshomsg);// 获取组件数据

          consolelog(this$refshotest);// 获取组件的方法

        }

      }

例子2：

<html部分

<view class="example-body">

<button class="button" type="primary" @click="togglePopup('top', 'popup')">顶部d出 popup</button>

<button class="button" type="primary" @click="togglePopup('center', 'popup')">中间d出 popup</button>

<button class="button" type="primary" @click="togglePopup('bottom', 'popup')">底部d出 popup</button>

</view>

<uni-popup ref="showpopup" :type="type" @change="change"><text class="popup-content">{{ content }}</text></uni-popup>

<uni-popup ref="showtip" :type="type" :mask-click="false" @change="change">

<view class="uni-tip">

<text class="uni-tip-title">警告</text>

<text class="uni-tip-content">这是一个通过自定义 popup，自由扩展的 警告d窗。点击遮罩不会关闭d窗。</text>

<view class="uni-tip-group-button">

<text class="uni-tip-button" @click="cancel('tip')">取消</text>

<text class="uni-tip-button" @click="cancel('tip')">确定</text>

</view>

</view>

</uni-popup>

<js部分

methods: {

togglePopup(type, open) {

switch (type) {

case 'top':

thiscontent = '顶部d出 popup'

break

case 'bottom':

thiscontent = '底部d出 popup'

break

case 'center':

thiscontent = '居中d出 popup'

break

}

thistype = type

this$nextTick(() => {

this$refs['show' + open]open()

})

},

cancel(type) {

this$refs['show' + type]close()

},

change(e) {

consolelog('是否打开:' + eshow)

}

},

一般来讲获取DOM元素，需documentquerySelector（"class"）获取这个dom节点，然后在获取元素的值。

但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的元素上绑定rel，然后$refs里面调用就行。

然后在javascript里面这样调用：this$refs元素绑定rel  这样就可以减少获取dom节点的消耗了

标签（空格分隔）： vue

绑定 ref="kmediaMonitor"

然后，js中直接调用就可以了

当 ref 和 v-for 一起使用的时候，你得到的 ref 将会是一个包含了对应数据源的这些子组件的数组。

$ref 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接 *** 作子组件的“逃生舱”————你应该避免在模板或计算属性中访问 $ref

绑定 ref="kmediaMonitor"

js中

第三方组件官网

Element-ui

iView

Vant

如果父类组件需要直接获取子类的方法 可以使用 $children

子获父 $parent 子获取跟组件 $root

如果使用自定义组件，在里面插入其他的文字或者标签，是不能够显示的，如果想在组件中插入其他标签，需要在标签中插入 <slot></slot> ,插槽写在哪个位置，插入的文字或者标签，就在哪个位置显示

我们先定义3个 全局 的自定义组件 分别为 child1 child2 child3

我们把vue实例当作根组件（父组件）

父跟子的关系

通常情况下，在父组件中有个子组件，子组件想要使用（获取）父组件的值，我们使用 $parent 来获取父组件的的值

我们在 child1 子组件中插入了一个组件这个时候 child1 变成了 childson 的父组件，如果这个时候我们在获取根组件（vue实例 | 根实例），这个时候我们可以用多个 $parent 来获取祖组件数据，当然，我们可以用 $root 直接获取根实例的值

父组件获取子组件的值，我们用 $children 来获取，

$children 获取的是所有子组件的实例，返回的是数组类型，再通过下标获取指定的子组件

如果页面的结构出现了调整，这里获取的具体的组件可以就对不上号了。：

如下