项目中VUE3常规用法

关于setup基础用法可看vue3基础

一、通过ref获取元素实例

• 父组件

<template>
   <ref-test ref="testRef" />
</template>
<script>
import { ref, watch, computed, nextTick } from 'vue'
setup() {
  const testRef = ref(null)
  testRef.value.handle()
  return { testRef}
}
</script>
 

• 子组件
  常规用法

<script>
export default {
  setup() {
    const handle = () => {
      console.log(11)
    }
    return { handle}
  }
}
</script>

setup语法糖用法

<script setup lang="ts">
import { defineExpose } from 'vue'
const handle = () => {
  console.log(11)
}
// 将方法或数据暴露出去
defineExpose({ handle })
</script> 

二、$nextTick使用

在vue中直接引入使用

import { ref, watch, computed, nextTick } from 'vue'
nextTick(() => {})

三、props传值

• 父组件

<ref-test :propsTest="1234" />

• 子组件
  常规用法

<script>
export default {
  props: { propsTest: Number },
  setup(props) {
  //父组件传过来的值
    console.log(props.propsTest)  }
}
</script>

setup语法糖用法

<script setup>
// defineProps 不需要引入，它们将自动地在 <script setup> 中可用
 const props = defineProps({
   propsTest: Number
 })
 console.log(props.propsTest)
</script>

四、emit向上传递

• 父组件

<ref-test  @updateEmit="updateEmit($event)" />
<script>
setup() {
const updateEmit = (value) => {
 console.log( value )
}
 return { updateEmit }
}
</script>

• 子组件
  常规用法

<div @click="testEmit()">点我</div>

<script>
export default {
  setup(props, { emit }) {
    //   emit向上传递
    const testEmit = () => {
      emit('updateEmit', 2112)
    }
    return { testEmit }
  }
}

setup语法糖用法

<div @click="testEmit()">点我</div>

<script setup lang="ts">
// defineEmits 不需要引入，它们将自动地在 <script setup> 中可用
// emit向上传递
const emit = defineEmits(['updateEmit'])
const testEmit = () => {
  emit('updateEmit', 2112)
}
</script>

五、获取router

<script lang="ts">
import { useRouter } from 'vue-router'
setup() {
   const $router = useRouter()
   console.log($router.currentRoute)
</script>
}

六、计算属性

用法比较常规

import {  watch, computed} from 'vue'
setup() {
   const comp = ref(0)
   const count = ref(1)
    // 计算属性
    const plusOne = computed(() => count.value + 1)
    console.log(plusOne.value, 90)
    // 监听
    watch(comp, (newV, oldV) => {
      console.log(newV, oldV, 88)
    })
}

七、数据监听

1、监听ref的值

const num= ref("")
watch(num, (newV, oldV) => {
    console.log(newV, oldV, 88);
});

2、监听reactive的值

const obj= reactive({
 str: "",
})
watch(() => obj.str, (newV, oldV) => {});

原因：vue无法监听对象内部的值，需要将值return出去监听
3、监听多个值

// 监听num，和str的值
watch([num,() => obj.str], (newV, oldV) => {
  console.log(newV[0],newV[1])
  console.log(oldV[0],oldV[1])
});