vue3中的单文件组件＜script setup＞和setup函数区别详解（二）

2023-11-28 13:58| 来源: 网络整理| 查看: 265

defineEmits 我是script setup的父组件 import {ref, onMounted, reactive } from 'vue'; import Child from "./Child.vue"; const getData = (val)=>{ console.log("接收子组件的值",val) } 子组件触发子组件数据 // setup 语法糖写法 //用defineEmits()来定义子组件要抛出的方法,语法defineEmits(['要抛出的方法','参数']) const emit = defineEmits(['exposeData']) const toValue = ()=>{ emit('exposeData','张三 -- 18') } defineExpose

父组件要想通过ref获取子组件的变量或函数，子组件须使用defineExpose暴露出去

setup函数形式

import { ref, onMounted, getCurrentInstance } from "vue"; import Child from "./Child.vue"; export default { components: { Child }, setup() { const childRef = ref(null); // 当前变量必须要与子组件上绑定的ref对应起来,(不需要使用defineExpose将方法暴露出来，可以直接使用ref获取） const instance = getCurrentInstance(); //获取当前组件实例 onMounted(() => { // 方法一 childRef.value.open(); // 调用子组件中的open方法 // 方法二 instance.proxy.$refs.childRefTwo.open(); // 调用子组件中的open方法 }); return { childRef, instance }; }, }; 子组件传值到父组件 import { onMounted } from "vue"; export default { props: { list: String, }, setup() { const open = () => { console.log("open点击了"); }; return { open }; // setup函数定义的函数，不需要使用defineExpose将方法暴露出来，可以直接使用ref获取 }, }; setup语法糖形式 import { ref, onMounted, getCurrentInstance } from "vue"; import Child from "./Child.vue"; const childRef = ref(null); const instance = getCurrentInstance(); //获取当前组件实例 // 扩展讲解 // 获取当前组件的上下文，下面两种方式都能获取到组件的上下文。 // 方式一，这种方式只能在开发环境下使用，生产环境下的ctx将访问不到 // const { ctx } = getCurrentInstance(); // // 方式二，此方法在开发环境以及生产环境下都能放到组件上下文对象（推荐） // const { proxy } = getCurrentInstance(); // // ctx 中包含了组件中由ref和reactive创建的响应式数据对象,以及以下对象及方法; // console.log(instance,'555'); onMounted(() => { // 方法一 childRef.value.open(); // 调用子组件中的open方法 // 方法二 instance.proxy.$refs.childRefTwo.open(); // 调用子组件中的open方法 }); 子组件传值到父组件 import { onMounted,defineExpose } from "vue"; const open = () => { console.log("open点击了"); }; defineExpose({ open }); // 必须要注册进来 // vue3中,语法糖中定义的方法，默认是不会暴露给ref进行调用的，必须要注册到defineExpose里面， // ref才能正常访问，如果没有注册到defineExpose中，通过ref调用子组中的方法，会报错 defineProps 和 defineEmits 都是只在 < script setup>中才能使用的编译器宏。他们不需要导入且会随着< script setup> 处理过程一同被编译掉。defineProps 接收与 props 选项相同的值，defineEmits也接收 emits选项相同的值。defineProps 和 defineEmits 在选项传入后，会提供恰当的类型推断。传入到 defineProps 和 defineEmits 的选项会从 setup 中提升到模块的范围。因此，传入的选项不能引用在setup 范围中声明的局部变量。这样做会引起编译错误。但是，它可以引用导入的绑定，因为它们也在模块范围内获取 attrs、slots 和useAttrs、useSlots 方法

在 < script setup> 使用 slots 和 attrs 的情况应该是很罕见的，因为可以在模板中通过 s l o t s 和 slots 和slots和attrs 来访问它们。在你的确需要使用它们的罕见场景中，可以分别用 useSlots 和 useAttrs 两个辅助函数：

import { useSlots, useAttrs } from 'vue' const slots = useSlots() const attrs = useAttrs()

useSlots 和 useAttrs 是真实的运行时函数，它会返回与 setupContext.slots 和 setupContext.attrs 等价的值，同样也能在普通的组合式 API 中使用

与普通的 < script > 一起使用

< script setup >可以和普通的< script >一起使用。普通的< script >在有这些需要的情况下或许会被使用到：

无法在< script setup>声明的选项，例如inheritAttrs【vue官网对于inheritAttrs的属性解释：默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute应用在子组件的根元素上。如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs:false】或通过插件启用的自定义的选项；声明命名导出，< script setup>定义的组件默认以组件文件的名称作为组件名；运行副作用或者创建只需要执行一次的对象。原因：< script setup> 中内容每次组件实例被创建的时候执行。< script setup> 中的顶层绑定都将自动暴露给模板。 // 普通 , 在模块范围下执行(只执行一次) runSideEffectOnce() // 声明额外的选项 export default { name: 'ComponentName', // 组件重命名 inheritAttrs: false, customOptions: {} }

在同一组件中将 < script setup> 与 < script > 结合使用的支持仅限于上述情况。具体来说：

不要为已经可以用 < script setup> 定义的选项使用单独的 < script > 部分，如 props 和 emits。

在 < script setup> 中创建的变量不会作为属性添加到组件实例中，这使得它们无法从选项式 API 中访问。我们强烈反对以这种方式混合 API。

如果你发现自己处于以上任一不被支持的场景中，那么你应该考虑切换到一个显式的 setup() 函数，而不是使用 < script setup>。

style的新特性之 v-bind() CSS变量注入

v-bind:属性 = “(在vue中要用的变量名字)”

Jerry import { ref, reactive } from "vue"; // prop接收样式 const props = defineProps({ border: { type: String, default: "5px solid yellow", }, }); // 常量声明样式 const background = "red"; // 响应式数据声明样式 const color = ref("blue"); const style = reactive({ opacity: "0.5", }); span { display: block; width: 50px; height: 50px; background: v-bind(background); /* 使用响应式数据声明的样式 */ color: v-bind(color); opacity: v-bind("style.opacity"); /* 使用prop接收的样式 */ border: v-bind("props.border"); }

实际的值会被编译成哈希化的 CSS 自定义属性，因此 CSS 本身仍然是静态的。自定义属性会通过内联样式的方式应用到组件的根元素上，并且在源值变更的时候响应式地更新

style的新特性之global

如果想让其中一个样式规则应用到全局，比起另外创建一个 < style>，可以使用 :global 伪类来实现

1223465

import { defineProps } from "vue"; :global(p){ /* //声明了一个全局类型p */ color: red; } 深度选择器

处于 scoped 样式中的选择器如果想要做更“深度”的选择，也即：影响到子组件，可以使用 :deep() 这个伪类：

.a :deep(.b) { /*样式内容 */ } 对await异步的支持setup函数的形式在模板中使用需要< Suspense > 内置组件进行包裹。

< Suspense > 是一个内置组件，用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态

export default { async setup() { // 在 `setup` 内部使用 `await` 需要非常小心 // 因为大多数组合式 API 函数只会在 // 第一个 `await` 之前工作 const data = await loadData() // 它隐性地包裹在一个 Promise 内 // 因为函数是 `async` 的 return { // ... } }setup语法糖形式

不必再配合 async 就可以直接使用 await 了，这种情况下，组件的 setup 会自动变成 async setup

const post = await fetch('/api').then(() => {}) 没有 Src 导入

由于模块执行语义的差异，< script setup > 中的代码依赖单文件组件的上下文。当将其移动到外部的 .js 或者 .ts 文件中的时候，对于开发者和工具来说都会感到混乱。因而

//禁止这样混用

【本文地址】

公司简介

联系我们

vue3中的单文件组件＜script setup＞和setup函数区别 详解（二）

vue3中的单文件组件＜script setup＞和setup函数区别详解（二）