Vue3综合使用案例

父组件

<template>
  <h3>父组件</h3>
  <div>{{ num }}</div>
  <div ref="box">使用ref获取dom</div>
  <div>watch监听数据-{{ watchVal }}</div>
  <about-view
    ref="child"
    :datas="num"
    :datas2="num"
    @getChildVal="hGetChildVal"
  />
</template>
<script setup>
import aboutView from "./AboutView.vue";
import {
  ref,
  reactive,
  onMounted,
  nextTick,
  computed,
  watch,
  // useRouter,
  // useRoute,
} from "vue";
 
// 路由跳转并且传参
// const router = useRouter();
// router.push({ path: "/about", query: { name: "123" } });
 
// // 路由接参
// const route = useRoute();
// nextTick(() => {
//   console.log(route.query);
// });
 
// 父组件获取子组件传来的数据
const hGetChildVal = (val) => {
  console.log(val);
};
 
// 父组件调用子组件方法
let child = ref();
onMounted(() => {
  child.value.childFun();
});
 
// ref与onMounted滴使用
let num = ref(123);
console.log(num);
onMounted(() => {
  console.log("onMounted执行了");
  setNum();
});
const setNum = () => {
  setInterval(() => {
    num.value++;
  }, 1000);
};
 
// 通过ref获取box元素，只需要定义一个名字为上方ref相同的名字即可
let box = ref();
nextTick(() => {
  console.log(box.value);
});
 
// reactive滴使用
let obj = reactive({
  name: "张三",
  age: 20,
});
obj.name = "lili";
console.log(obj);
 
// computed滴使用
let com1 = computed(() => {
  return 12345;
});
console.log(com1);
 
// watch滴使用
let watchVal = ref(0);
watch(
  () => num.value,
  (newV, oldV) => {
    watchVal.value = newV + oldV;
    console.log(newV, oldV);
  },
  {
    deep: true,
  }
);
</script>
 

子组件

<template>
  <div class="about">
    <h3>子组件</h3>
    <div>父传子数据: {{ prop.datas }}-{{ prop.datas2 }}</div>
  </div>
</template>
<script setup>
import { defineProps, defineEmits, onMounted, defineExpose } from "vue";
 
// 子组件获取父组件传过来滴数据
const prop = defineProps({
  datas: Number,
  datas2: Number,
});
 
// 子组件像父组件传递数据
const emit = defineEmits({});
onMounted(() => {
  emit("getChildVal", "我是子组件传过来的内容");
});
 
const childFun = () => {
  console.log("我是子组件方法,在父组件调用了。");
};
 
// 暴露子组件方法，方便父组件直接调用
defineExpose({
  childFun,
});
</script>