vue3 ref 操作和使用函数

今天升级使用vue3发现通过ref获取的内容是null，下面是爬坑过程

子组件模板

<template>
    <div class="video-list">
        <div v-for="item in videoList"
             v-bind:video="item"
             v-bind:key="item.id"
             class="video-item">
            <video controls autoplay playsinline ref="videos" :height="cameraHeight" :muted="item.muted" :id="item.id"></video>
        </div>
    </div>
</template>
<script>
    import { defineComponent } from 'vue';	
    export default defineComponent({
        name: 'vue3-webrtc',
        setup(){},
        methods: {
        	async join(){
            console.log('join')
          }
        }
          
    });
</script>

父组件调用

    <Vue3WebRTC 
      ref="webrtc"
      width="100%"
      :roomId="roomId"
      @error="onError" />
  </div>
  <div class="row">
    <div class="col-md-12 my-3">
        <button type="button" class="btn btn-primary" @click="onJoin">Join</button>
    </div>
  </div>
<script setup lang="ts">
import { VueWebRTC } from 'vue-webrtc';
import { onMounted, ref } from 'vue'

// 你到ref
const webrtc = ref(null);
console.log(webrtc);

</script>

我们得到null 这里是生命周期的问题，setup里面相当于created 此时还没有dom

修改如下

<script setup lang="ts">
import { VueWebRTC } from 'vue-webrtc';
import { onMounted, ref } from 'vue'

// 你到ref
const webrtc = ref(null);

function onJoin() {
      webrtc.join();
  }

onMounted(()=>{
    console.log('获取dom元素',webrtc)
})
</script>

这时我们能打印出来数据，

但是当我们调用方法onJoin方法时就会提示webrtc没有join方法，我们知道vue3是proxy模式，要拿到这个实体，还是要用里面的value，最后修改如下，即可正常

<script setup lang="ts">
import { VueWebRTC } from 'vue-webrtc';
import { onMounted, ref } from 'vue'

// 你到ref
const webrtc = ref(null);

function onJoin() {
      webrtc.value.join();
  }

onMounted(()=>{
    console.log('获取dom元素',webrtc.vlaue)
})
</script>