西安网站建设seo优化,移动端模板网站建设,成都手工活外发加工网,企业网站作用Vue组件基础是DOMDOMjs前端组成下的页面布局区域划分#xff0c;每个组件展示时都要在页面上有一定的大小。每个设定好的页面区域都可以定义Vue的组件#xff0c;组件中包含了HTML模板、样式、Vue组件对象的定义。Vue的组件是包含页面设计在内的#xff0c;是一种为页面某个…Vue组件基础是DOMDOMjs前端组成下的页面布局区域划分每个组件展示时都要在页面上有一定的大小。每个设定好的页面区域都可以定义Vue的组件组件中包含了HTML模板、样式、Vue组件对象的定义。Vue的组件是包含页面设计在内的是一种为页面某个设计区域提供独立支撑的解决方案或实例。 1、组件的定义 组件一般通过单文件来定义文件后缀名为“.vue”。无论组件是使用构建的方式还是不适用构建的方式组件的定义中通常包含三个部分分别是HTML的模板、style、Vue组件对象。使用构建的方式构建组件最后也可以通过build的方式将工程内容转换为静态的非构建方式组件。组件的定义格式可参照如下
script setup langts
// 添加vue组件定义
/scripttemplate
!-- 添加Vue组件对用的HTML模板 --
/templatestyle
/* 为HTML模板增加对用的class */
/style
2、组件的使用 Vue组件的使用有两种不同的方式第一种是组件直接引用的局部引用方式另一种是组件的全局引用方式。组件的具备引用方式是组件定义完成后不注册为Vue的全局对象使用时需要找到对应的组件定义文件显示的在使用处注明。如下所示
script setup langts
import StandardForm from ./components/StandardForm.vue; //引入
// 添加vue组件定义
/scripttemplate
!-- 添加Vue组件对用的HTML模板 --
StandardForm/ !-- 使用 --
/templatestyle
/* 为HTML模板增加对用的class */
/style
另一种方式为全局引用方式。在组件定义完成后需要在整个工程初始化时明确的注册组件。组件注册完成后这个组件就是全局组件。在使用时不需要显式的引入就可以直接使用。比较组件的局部引用和全局引用局部引用需要明确组件的定义文件位置全局引用不需要明确组件的定义文件位置但是需要在使用前有明确的全局注册。组件全局注册和使用的案例如下
//组件注册
import { createApp } from vueconst app createApp({})
app.component(// 注册的名字
MyComponent,
// 组件的实现{/* add component code here */}
)//组件的使用
!-- 在调用全局组件的HTML模板中直接添加--
MyComponent/
组件使用过程中组件的来源对组件的使用有很大的影响。局部引用的组件因需要直接指明组件的定义文件位置所以组件的之间的依赖关系非常明显全局引用的组件需要注册组件使用时不会指明组件定义文件的具体位置当工程非常庞大或者维护的非常差时组件的依赖关系就有些模糊。因此除了公共依赖的组件和提供公共支持功能的组件之外不要做全局注册。 3、组件的自定义属性 组件上的自定义属性时参照HTML标签设置的。在使用组件时必须显式的给组件的自定义属性赋值。组件的自定义属性如下所示
script setup langts
defineProps{msg: string
}()
/scripttemplatedivh1{{ msg }}/h1/div
/template
使用时如下
HelloWorld msgYou did it! /
组件的自定义属性和组件内部的数据或状态是不同的即便它们之间可能有交集。组件的自定义属性是给别的组件用的组件内部的数据或状态是给组件自己用的。 4、组件上的监听事件 组件上除了有自定义属性之外还可以有自定义事件的句柄例如在整个组件上定义的点击事件、双击事件、输入事件等。将整个组件视为整体的一个HTML标签那么标签上的监听事件就是仿照正常HTML标签的事件做处理如将组件上的事件句柄给予一个确定的事件名称暴露给使用者。使用者给这个暴露出来的事件句柄提供对应的事件处理函数。以下为组件上监听事件的案例 带有自定义属性和自定义事件的组件如下
script setup langts
defineProps{msg: string
}()
defineEmits{(e:aclick,msg:string): void
}()
/scripttemplatediv click$emit(aclick)h1{{ msg }}/h1/div
/template
使用这个组件的父组件如下
script setup langts
import {ref} from vue
import HelloWorld from ./components/HelloWorld.vueconst messageref(You did it!);function triggerClickOnHelloWorld(){console.log(Hello world);message.valueHello World!;
}
/scripttemplateHelloWorld v-bind:msgmessage aclicktriggerClickOnHelloWorld/
/template
从以上案例可以看出子组件中的自定义事件和自定义属性在父组件中是可以访问和处理的子组件等同于一个独立不可拆分的HTML标签。父组件按照规则是不可以访问子组件内部的数据和状态除非子组件的数据是作为自定义属性。 5、组件标签环绕的内容 组件标签环绕的内容类似于divHello Wrold/div被环绕的内容也应该可以被组件解析。为了满足这种解析情况Vue增加了插槽slot的标签这个标签可以在组件定义时指定环绕内容的位置。样例如下
script setup langts
defineProps{msg: string
}()
defineEmits{(e:aclick,msg:string): void
}()
/scripttemplatediv click$emit(aclick)h1{{ msg }}/h1slot/slot !-- 指定插槽的位置--/div
/template
实际使用时的处理
script setup langts
import {ref} from vue
import HelloWorld from ./components/HelloWorld.vueconst messageref(You did it!);function triggerClickOnHelloWorld(){console.log(Hello world);message.valueHello World!;
}
/scripttemplateHelloWorld v-bind:msgmessage aclicktriggerClickOnHelloWorldThis is the first slot/HelloWorld
/template
因为插槽实际的值是由使用组件的父组件确定并有子组件的标签环绕所有插槽的内容并不会在组件中变得混乱。当一个组件中有多个插槽时那么在实际使用时需要在组件环绕的内容中为每个插槽指定对应关系如定义时名字a的插槽对应实际使用时名字为a的文段段落。更复杂一点可能时动态的确定这种对应关系。 6、动态组件 动态组件是指组件在页面上频繁切换切换后旧的组件内容将会被卸载掉。动态组件是利用类似于继承关系的原理所有的组件都有公共的父类component所有组件的定义都是component的子类这样不同组件都是component的子类所有的子类都是父类型的。在页面上使用component父类型时需要使用is的动态属性指定其具体的实现子类型即具体的组件。
component :isStandardForm/component 需要动态切换类型时只需要将具体的组件值用动态属性替换动态属性受任意事件影响其值在不同组件之间来回变动。这样就可以实现动态组件了。具体案例如下
script setup langts
import {shallowRef} from vue
import StudyVue from ./components/StudyVue.vue;
import StandardForm from ./components/StandardForm.vue;const currentComponentshallowRef(StudyVue);function changeComp(){console.log(change component);if(StudyVuecurrentComponent.value){currentComponent.valueStandardForm;}else{currentComponent.valueStudyVue;}
}
/scripttemplatecomponent :iscurrentComponent/componentbutton typebutton clickchangeComp切换组件/button
/template
7、组件模板的解析 直接在DOM中编写模板的时候注意驼峰格式名称有可能会解析成为连字符格式的名称。特殊位置下的标签只能解析某种类型的标签如tr、td、li等可以将用is属性来解决。
tabletr isvue:blog-post-row/tr
/table 如果是在标准的组件定义文件单文件、内联字符串模板template:、script typetext/x-template/script中则不需要考虑模板解析的问题。
