<script>
// demo.vue
import { defineComponent, ref } from 'vue'
import useBars from './useBars'
export default defineComponent({
? ? props: {
? ? ? ? Bars: Array,
? ? },
? ? setup() {
? ? ? ? const rootRef = ref(null)? ? ? ? const { currentPageIndex } = useBars(rootRef) // 這里傳遞過去的是一個(gè)響應(yīng)式對象
?? ??? ?
?? ??? ? const { currentPageIndex: currentPageIndex1 ?} = useBars(rootRef) // 這里傳遞過去的就是一個(gè)null，而不是對象
? ? ? ? console.log('組件 setup 最后一段')
? ? ? ? return {
? ? ? ? ? ? rootRef,
? ? ? ? ? ? currentPageIndex,
? ? ? ? }
? ? },
})
</script>

// useBar.js
import { onMounted } from 'vue'
export default function useSliders(rootRef) {
?? ?
/**
? ? ?* 1. 傳遞過來是一個(gè)響應(yīng)式對象
? ? ?*
? ? ?* ?傳過來是一個(gè)響應(yīng)式對象，調(diào)用這個(gè)函數(shù)的時(shí)候rootRef.value = nul
? ? ?* ?組件實(shí)例化完畢，在組件里面 rootRef.value = <div></div>
? ? ?* ?執(zhí)行 這個(gè)onmonted事件，里面就獲取到了一個(gè)div，這個(gè)onMounted事件是當(dāng)組件實(shí)例化完畢才會執(zhí)行的
? ? ?*/
? ? /**
? ? ?* ?傳過來就是一個(gè)null
? ? ?* ? onMounted 執(zhí)行的時(shí)候自然也是null
? ? ?*?
? ? ?*/
? ? // ! 感覺是訪問同一個(gè)地址，如果傳遞一個(gè)響應(yīng)式對象，然后組件里面給 rootRef.value賦值，這里就也能拿到了
? ? onMounted(() => {
? ? ? ? // debugger
? ? ? ? console.log('hooks slider mounted --->', rootRef)
? ? })
? ? return {}
}```

<template>
<a-modal>
? ? <div id="map"></div>
</a-modal>
</template>

<script>
import TMap from 'TMap'
export default{
? ? method:{
? ? ? ? open(){
? ? ? ? ? ? this.initMap()
? ? ? ? },
? ? ? ? initMap(){
? ? ? ? ? ? const center = new TMap.LatLng(39.984120,116.307484)
? ? ? ? ? ? const container = document.getElementById('map')
? ? ? ? ? ? const map = new TMap.Map(container, {
? ? ? ? ? ? ? ? center:center,
? ? ? ? ? ? ? ? zoom:11
? ? ? ? ? ? })
? ? ? ? }
? ? }
}
</script>

<a-modal ref="modal">
? ? <div id="map"></div>
</a-modal>

<template>
<a-modal ref="modal">
? ? <div id="map"></div>
</a-modal>
</template>

<script>
import TMap from 'TMap'
export default{
? ? method:{
? ? ? ? open(){
? ? ? ? ? ? this.initMap()
? ? ? ? },
? ? ? ? initMap(){
? ? ? ? ? ? const center = new TMap.LatLng(39.984120,116.307484)
? ? ? ? ? ? const container = this.$refs.modal.$slots.default[0]
? ? ? ? ? ? const map = new TMap.Map(container, {
? ? ? ? ? ? ? ? center:center,
? ? ? ? ? ? ? ? zoom:11
? ? ? ? ? ? })
? ? ? ? }
? ? }
}
</script>

open(){
? ? this.$nextTick(()=>{
? ? ? ? this.initMap()
? ? })
},