Vue3项目开发使用技巧setup

<script setup>

<script setup>
import { ref, watch, onMounted, computed ,getCurrentInstance,} from 'vue';

import { useRouter, useRoute } from 'vue-router';
import { useStore } from 'vuex';
//const route = useRoute();
//const router = useRouter();
const { query, params } = useRoute();
const store = useStore();
//使用refs
internalInstance = getCurrentInstance();
// { proxy } = getCurrentInstance()
internalInstance.proxy.$refs.aaa
// proxy.$refs.aaa
const detailBtn = ref(1);

defineExpose({ symbolsList }); //导出

onMounted(() => {});
</script>

//使用
<Index ref="I"></Index>

<script setup>
    import Index from "./index.vue";

    const I = ref(null);
    
    function test() {
        console.log(I.value?.symbolsList) // Hello World
    }
</script>

<script>

<script>
import { onMounted, ref } from 'vue';
export default {
  name: 'List',
  components: {  },
  props: {
    value: {
      type: [Number, String],
      default: undefined,
    },
  },
  emits: ['', ''],
  setup(props, { attrs, slots, emit, expose }){
  const visible = ref(false);
  const onClick = (item, idx) => {
      visible.value = false;
      emit('select', item, idx)
    }

    //导出
	expose({onClick});
    return {
      visible,
      onClick,
    }

  }
}
</script>

//使用
<Index ref="I"></Index>

<script setup>
    import Index from "./index.vue";

    const I = ref(null);
    
    function test() {
        console.log(I.value?.symbolsList) // Hello World
    }
</script>