vue3常用方法

1.子组件接收父组件通用模板

<script setup lang="ts">
  interface Props {
    codeStyle?: CSSProperties // 代码样式
    dark?: boolean // 是否暗黑主题
    code?: string // 代码字符串
  }
  const props = withDefaults(defineProps<Props>(), {
    codeStyle: () => { return {} },
    dark: false,
    code: '',
  })
</script>

<!-- 父组件 -->
<script setup lang="ts">
  const count = ref(0);
  provide('count', count);
</script>
<!-- 子组件 -->
<script setup lang="ts">
  const count = inject('count');
</script>

2.父组件接收子组件通用模板

<!-- 子组件 -->
<script setup lang="ts">
  const emits = defineEmits([`finish`]);
  emits('finish', 666);
</script>
<!-- 父组件 -->
<script setup lang="ts">
  const finish = (data) => {
    console.log('data',data)
  }
</script>
<template>
    <subcomponent @finish="finish"></subcomponent>
</template>

<!-- 子组件 -->
<script setup lang="ts">
  const msg = 'Hello World';
  defineExpose({
    msg,
  });
</script>
<!-- 父组件 -->
<script setup lang="ts">
  const subcomponentref = ref();
  const test = () => {
    console.log(subcomponentref.value.msg); // Hello World
  }
</script>
<template>
    <subcomponent ref="subcomponentref" />
</template>

3.大屏

<script setup lang="ts">
import { ref, Ref, onMounted, onBeforeUnmount } from "vue";
const dataScreenRef = ref<HTMLElement | null>(null);
onMounted(() => {
  // 初始化时为外层盒子加上缩放属性，防止刷新界面时就已经缩放
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
    dataScreenRef.value.style.width = `1903px`;
    dataScreenRef.value.style.height = `911px`;
  }
  window.addEventListener("resize", resize);
});
// 根据浏览器大小推断缩放比例
const getScale = (width = 1903, height = 911) => {
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
};
// 监听浏览器 resize 事件
const resize = () => {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
  }
};
</script>

.dataScreen {
  position: fixed;
  top: 50%;
  left: 50%;
  transition: transform 0.3s;
  transform-origin: left top;
  overflow: hidden;
}

4.针对网络请求到的数据为proxy对象时

<script setup lang="ts">
  // 方式1
  JSON.parse(JSON.stringify(this.currentData));
  // 方式2
  toRaw(this.currentData)
</script>

6.子组件调用父组件的方法

<!-- 父组件 -->
<script setup lang="ts">
  import Ces from './components/ces.vue';
  const parentFunc = () =>{
    console.log("我是父组件的方法")
  }
</script>
<template>
  <Ces :parentFunc="parentFunc"></Ces>
</template>

<!-- 子组件 -->
<script setup lang='ts'>
interface Props {
  parentFunc: Function // 父组件方法
}
const props = withDefaults(defineProps<Props>(), {
  parentFunc: () => { }
})
const dianji = () => {
  props.parentFunc()
}
</script>
<template>
  <div>
    <div @click="dianji">测试</div>
  </div>
</template>

7.父组件调用子组件的方法

<!-- 父组件 -->
<script setup lang="ts">
  import { ref } from 'vue'
  import Ces from './components/ces.vue';
  const mychild=ref()
  const diaoyong= () =>{
    mychild.value.childFunc();
  }
</script>

<template>
  <div>
    <div @click="diaoyong">调用子组件的办法</div>
    <Ces ref="mychild"></Ces>
  </div>
</template>
<!-- 子组件 -->
<script setup lang='ts'>
const childFunc = ()=>{
  console.log("我是子组件的方法");
};
defineExpose({
  childFunc
})
</script>