企业官网建设流程全解析

南昌seo网站管理,甘肃网站建设制作商,深圳企业网站制作设计,河北省建设机械协会官方网站#xff0c;插槽如何穿透3#xff0c;暴露实例以及实例中的方法在vue3中的$attrs的变化vue3中$listeners已被删除合并到$attrs中。vue3的$attrs现在包括class和style属性。vue2中不包含class和style属性。也就是说#xff1a;当子组件写上 v-bind$attrs父组件就…插槽如何穿透3暴露实例以及实例中的方法在vue3中的$attrs的变化vue3中$listeners已被删除合并到$attrs中。vue3的$attrs现在包括class和style属性。vue2中不包含class和style属性。也就是说当子组件写上 v-bind$attrs父组件就可以使用子组件的内置事件和内置属性了。下面我们会详细说一下$attrsprops 如何进行传递属性和事件我们可以在子组件中使用 v-bind$attrs这样可以把父组件中的属性传递给子组件了// 子组件templatediv!-- v-bind$attrs 可以接收到父组件中的属性设置 --el-input v-bind$attrs/el-input/div/template// 父组件templatedivMyInput classset-width placeholder请输入名称 clearable v-modelname blurclearHandler/MyInput/div/templatescript setup langtsimport MyInput from /components/MyInput.vueimport { ref } from vue;let name ref()const clearHandler () {console.log(失去焦点啦)name.value copy}/scriptstyle langscss scoped.set-width {margin: 100px;width: 300px;}/style0101-1如何解决写组件时没有属性提示的问题我们发现一个问题在父组件中的组件写相关属性时没有属性提示。// 子组件templatediv!-- v-bindprops 现在我们的属性肯定是 element-plus 的内置属性了 --el-input v-bindprops/el-input/div/templatescript setup langts// 引入 input 的所有属性import { type InputProps} from element-plus// 定义 props Partial将必填属性变成可选属性const props definePropsPartialInputProps()/script这样父组件在使用的时候就可以看到属性提示了。插槽如何封装1: 通过 template 来封装插槽templatedivel-input v-bindprops!-- 插槽 --template v-for(_, slotName) in $slots #[slotName]slot :nameslotName/slot/template/el-input/div/templatescript setup langts// 引入 input 的所有属性import { type InputProps} from element-plus// 定义 props Partial将必填属性变成可选属性const props definePropsPartialInputProps()插槽如何封装2: 通过h函数来处理插槽我们使用h函数来进行封装。h函数如果第1个参数如果是组件那么第三个参数就是插槽templatediv!-- 我们使用h函数来进行封装h函数如果第1个参数如果是组件那么第三个参数就是插槽 --component :ish(ElInput, {...$attrs,...props}, $slots)/component/div/templatescript setup langtsimport { h } from vue// 引入 input 的所有属性import { type InputProps, ElInput} from element-plus// 定义 props Partial将必填属性变成可选属性const props definePropsPartialInputProps()/script// 父组件templatedivMyInput classset-width placeholder请q输入内容!-- 在组件中使用插槽 --template #prependel-select v-modelselect placeholderSelect stylewidth: 115pxel-option labelRestaurant value1 /el-option labelOrder No. value2 /el-option labelTel value3 //el-select/templatetemplate #append.com/template/MyInput/div/templatescript setup langtsimport MyInput from /components/MyInput.vueimport { ref } from vue;const select ref(1)/scriptstyle langscss scoped.set-width {margin: 100px;width: 300px;}/style02暴露实例以及实例中的方法我们可以通过 defineExpose 来暴露实例以及方法【常用的】也可以通过vm.exposed来进行暴露实例以及方法需要注意组件最初设置了v-iffalse这种情况// 子组件templatediv!-- 我们使用h函数来进行封装h函数如果第1个参数如果是组件那么第三个参数就是插槽 --component :ish(ElInput, {...$attrs,...props, ref: nodeRef}, $slots)/component/div/templatescript setup langtsimport { h, getCurrentInstance } from vue// 引入 input 的所有属性import { type InputProps, ElInput} from element-plus// 定义 props Partial将必填属性变成可选属性const props definePropsPartialInputProps()// 获取当前组件实例const vm getCurrentInstance()// ref可以是一个字符串也可以是一个函数。这样父组件就可以通过ref访问这个组件的实例了function nodeRef(inputInstance) {// 现在我们把子组件实例给他当组件使用了v-iffalse的时候inputInstance为null// 这里我们是把实例(实例中包含方法)暴露出去vm.exposed inputInstance || {}// 代理对象也要做同步的更改vm.exposeProxy inputInstance || {}}/script// 父组件templatedivMyInput classset-width v-modelmsg refNodeInputRef placeholder请输入内容 blurclearHandler!-- 在组件中使用插槽 --template #prependel-select v-modelselect placeholderSelect stylewidth: 115pxel-option labelRestaurant value1 /el-option labelOrder No. value2 /el-option labelTel value3 //el-select/templatetemplate #append.com/template/MyInputel-button clickgetHandler清空值/el-button/div/templatescript setup langtsimport MyInput from /components/MyInput.vueimport { ref } from vue;const select ref(1)const msg ref(放假快乐)const NodeInputRef ref(null)// 获取实例中的方法const getHandler () {NodeInputRef.value?.clear()}const clearHandler () {console.log(失去焦点啦)}/script0304另外一种暴露方式常见的暴露方式defineProps({name:xxx,age:xxx,})等价与下面这一种vm.exposed {name:xxx,age:xxx,}vue3 中的 propsprops 是组件的自定义属性用于从父组件向子组件传递数据。props 不会包含继承的属性如 class 和 style除非显式声明。vue3 中的 $attrsvu3中$attrs: 包含了所有[传递]给[子组件]的非 props 属性。如继承的属性如 class 和 style以及未在 props 中声明的属性。vue3中的$attrs: 包含 style和class。$attrs包含着数据和事件。vue3 $listeners已被删除合并到$attrs中。在vue2中的$attrsvu2中$attrs: 包含了所有[传递]给[子组件]的非 props 属性和style和class之外的属性。vue2中的$attrs: 不包含 style和class下面是详细的讲解在V ue2 中attrs里面包含着上层组件传递的所有数据(除style和class)当一个组件声明了prop时候attrs里面包含除去prop里面的数据剩下的数据。结合inheritAttrs:false可以将传递下来的数据应用于其他元素而不是根元素。h函数封装上面的组件有些的小伙伴说我们是否可以使用h函数去封装上面的组件呢script langtsimport { defineComponent, h, getCurrentInstance } from vueimport { type InputProps, ElInput } from element-plusexport default {// 组件名称name: MyInput,inheritAttrs: false,setup(props, { attrs, slots }) {console.log(attrs, attrs)// attrs除去props中声明的属性。包含属性和事件const vm getCurrentInstance()function nodeRef(inputInstance: any) {vm.exposed inputInstance || {}vm.exposeProxy inputInstance || {}}return () h(ElInput, {...attrs,...props,ref: nodeRef}, slots)}}templatedivMyInput classset-width placeholder请输入名称 clearable v-modelname blurclearHandler/MyInput/div/templatescript setup langtsimport MyInput from /components/MyInput.vueimport { ref } from vue;let name ref()const clearHandler () {console.log(失去焦点啦)name.value copy}/scriptstyle langscss scoped.set-width {margin: 100px;width: 300px;}/style05遇见问题这是你成长的机会如果你能够解决这就是收获。