商城火车站,龙之向导外贸官方网站,网站推广淘宝联盟怎么做,渭南汽车网站制作结论先行#xff1a;
script setup 是 Vue3 的语法糖#xff0c;简化了组合式 API 的写法#xff0c;实现了 “顶层的绑定”。例如#xff1a;
① 声明的属性和方法无需 return#xff0c;就可以直接在模板使用#xff1b;
② 引入组件的时候#xff0c;会自…结论先行
script setup 是 Vue3 的语法糖简化了组合式 API 的写法实现了 “顶层的绑定”。例如
① 声明的属性和方法无需 return就可以直接在模板使用
② 引入组件的时候会自动注册无需通过 components 手动注册
③ 使用 defineProps 接收父组件传递的值defineEmits 定义自定义事件
④ 默认不会对外暴露任何属性和方法如果要暴露的话使用 defineExpose
⑤ useAttrs 获取属性useSlots 获取插槽 具体解析
1、script setup 是什么
script setup 是在 Vue3.2 之后新增的语法糖简化了组合式 API 的写法并且运行性能更好。 在单文件组件 SFC 中使用 Composition 组合式 API 的 编译时 语法糖。 基本语法需要在 script 代码块加上 setup 属性
script setupconsole.log(你好script setup)
/scriptscript setup 和 script 的执行时机是不同的 普通的 script 只会在组件第一次被引入的时候执行一次而 script setup 中的代码会在每次组件实例被创建的时候执行 2、script setup 语法糖的特点
① 不需要再手动写 setup(){ }
因为在 setup 函数中所有 ES 模块导出都被认为是暴露给上下文的值。
script setupconsole.log(你好script setup)
/script② 属性和方法无需返回可以直接使用。
不需要写 return直接声明数据就可以在模板中使用了。 因为已经在 script setup 标签中实现了 “顶层的绑定”。 解决了之前需要将声明的变量、函数以及 import 引入的内容通过 return 向外暴露才能模板中使用的问题。 templatep{{ msg }}/p
/templatescript setupconst msg ref(hello)
/script③ 引入组件的时候会自动注册无需通过 components 手动注册。
templatecom{{ msg }}/com
/templatescript setupimport com from ./com.vue
/script④ 使用 defineProps 接收父组件传递的值。
defineProps 是 Vue3 的一个宏函数使用时可不导入参数与 Vue2 的 props 选项相同。
defineProps 返回的 props 对象是一个响应式 proxy 对象特性与 reactive 基本相同。但是定义的 props 对象的值是只读的而且可以在模板中直接使用属性。
templatep{{ msg }}/p
/templatescript setupconst props defineProps({msg: String,name: {type: String,default: 默认值}})console.log(props.name)props.name haha // 不能修改声明的props的值是只读的
/script
⑤ useAttrs 获取属性useSlots 获取插槽defineEmits 获取自定义事件defineExpose 对外暴露 useAttrs接收父组件传递的属性和事件 在组件中可以直接使用这些属性和事件无需在 props 和 emits 中声明。在模板中就可以直接使用它们。 与 defineProps 相比useAttrs 的优先级较低。 useAttrs 能够接收到所有属性但不能够对接收到的属性进行类型校验和默认值设置。 templatedivp{{ title }}/pbutton clickonClick点击/button/div
/templatescript setup
import { useAttrs } from vue
const { title, onClick } useAttrs()
/scriptdefineEmits父组件向子组件传递函数
defineExpose可以将子组件中的属性和方法暴露给父组件 默认不会对外暴露任何属性和方法 父组件
templatep父组件/pchild refchildRef :valueparentValue funcfunc/
/templatescript setup
import child from ./child;const parentValue ref(我是爸爸);
const func (params) {parentValue.value params
};const childRef ref(null);
onMounted((){// 调用子组件中的参数和函数console.log(childRef.value.a);childRef.value.childFn();
});
/scriptscript
export default {name: parent
}
/script
子组件
templatep子组件/pp{{ value }}/pbutton clickemit(func, 哈哈哈)点击/button
/templatescript setup
import { defineProps, defineEmits, defineExpose } from vue// 接收父级传过来的参数
const props defineProps([value]);
// 接收父级传过来的方法
const emit defineEmits([func]);const childValue 我是儿子;
const childFn () {console.log(我是子组件中的方法);
}// 将参数childValue和函数childFn暴露给父组件
defineExpose({childValue,childFn
});
/scriptscript
export default {name: child
}
/script
