vue 3 props $parent $root inject 使用

子组件

<template>
  <div>
    <h1>props 调用 {{ props.propmsg }}</h1>
    <h1>$parent 调用 {{ GetParent($parent) }}</h1>
    <h1>$root 调用 {{ GetRoot($root) }}</h1>
    <h1>inject 调用 {{ count }}</h1>
  </div>
</template>
<script lang="ts" setup>
import { inject, ref } from 'vue'
const props = defineProps({ propmsg:String })
// $parent
const GetParent = (p: any) => {
  return p.age
}
// $root
const GetRoot = (r: any) => {
  return r.isHaveValue
}
const name = ref('小明')
//暴露 name 可以供 父组件调用
defineExpose({ name })
//inject
const count = inject('count')
</script>

　　

 

父组件

<template>
  <div>
    <testview ref="son" propmsg="我是props111"></testview>
    <h1>子组件的refs中的name {{ GetRefs() }}</h1>
  </div>
</template>

<script lang="ts" setup>
import testview from '../components/TestHello/TestHello.vue'
import { provide, ref } from 'vue'

const age = ref(2220)
// 暴露 age 子组件可以使用 $parent 获取
defineExpose({ age })

// 使用 ref
const son = ref()
// 获取 子数据对象 name
const GetRefs = () => {
  if (typeof son.value === 'object') {
    console.log(son.value.name)
    console.log(typeof son.value)
  }
  const obj = Object.assign({}, son.value)
  return obj.name
}

// 子组件可以使用 inject 获取
provide('count', 12)
</script>

　　

注意  <script lang="ts" setup> 是可以使用 $parent $root 如果是普通标签 <script lang="ts"> 则不能使用 会报错 只能 用 privde inject 方式

例如 下面代码  同时 也要注意  在  <script lang="ts" setup> 中   defineExpose({ name })   defineProps({ propmsg:String }) ， defineExpose defineProps 是不需要 import 直接使用

 

<template>
  <div>
    <h1>props 调用 {{ propmsg }}</h1>
    <h1>$parent 调用 {{ GetParent($parent) }}</h1>
    <h1>$root 调用 {{ GetRoot($root) }}</h1>
    <h1>inject 调用 {{ count }}</h1>
  </div>
</template>


<script lang="ts" setup>
// import { inject, ref } from 'vue'
// const props = defineProps({ propmsg:String })
// // $parent
// const GetParent = (p: any) => {
//   return p.age
// }
// // $root
// const GetRoot = (r: any) => {
//   return r.isHaveValue
// }
// const name = ref('小明')
// //暴露 name 可以供 父组件调用
// defineExpose({ name })
// //inject
// const count = inject('count')
//
</script>
<script lang="ts">
import { inject, ref, defineComponent } from 'vue'
export default defineComponent({
  name: 'test-view',
  props: { propmsg: String },
  setup() {
    // $parent
    const GetParent = (p: any) => {
      return p.age
    }
    // $root
    const GetRoot = (r: any) => {
      return r.isHaveValue
    }
    const name = ref('小明')
    //暴露 name 可以供 父组件调用
    defineExpose({ name })
    //inject
    const count = inject('count')

    return {
      name,
      count,
      GetParent,
      GetRoot
    }
  }
})
</script>

　　

Vue 3中的setup函数是一个关键特性，它在组件创建时执行，并用于替代Vue 2.x中的beforeCreate和created钩子函数。setup函数的主要作用是将组件的状态和行为进行分离，使得组件更加清晰和易于维护。以下是setup函数的具体作用和使用场景的详细解释：

一、初始化组件状态和方法

• 在setup函数中，可以使用reactive和ref等函数来创建响应式数据和计算属性。这些数据和方法将在组件的模板中被访问和使用。
• 通过setup函数，开发者可以集中管理组件的状态、计算属性和方法，使得组件逻辑更加模块化和易于管理。

二、设置生命周期钩子

• 在Vue 2.x中，生命周期钩子如created、mounted等被用来执行组件的初始化操作和清理操作。
• 而在Vue 3中，可以在setup函数中使用onMounted、onUnmounted等函数来实现相同的功能。这使得生命周期钩子的管理更加集中和直观。

三、提供注入功能

• setup函数还提供了provide和inject功能，允许在祖先和后代组件之间共享数据。
• 通过provide函数，祖先组件可以提供数据或方法给后代组件；而后代组件则可以使用inject函数来获取这些数据或方法。

四、提升代码可读性和可维护性

• 使用setup函数，开发者可以将相关逻辑集中在一个地方，而不是分散在组件的不同生命周期钩子中。这使得代码更容易阅读和理解，特别是在大型项目中。
• 此外，由于setup函数支持TypeScript的类型推断，因此可以进一步提高代码的可读性和可维护性。

五、增强性能

• setup函数的执行时机比Vue 2.x中的生命周期钩子更早，它在组件实例创建之前执行。这可以优化组件的初始化过程，减少不必要的开销。
• 由于setup函数中的逻辑是惰性求值的，并且在组件重新渲染时不需要重新执行，因此可以进一步提高组件的性能。

综上所述，Vue 3中的setup函数通过初始化组件状态和方法、设置生命周期钩子、提供注入功能、提升代码可读性和可维护性以及增强性能等多方面的优势，为开发者提供了更强大的工具来构建应用。