Vue组件基础

Vue组件基础是DOM+DOM+js前端组成下的页面布局区域划分，每个组件展示时都要在页面上有一定的大小。每个设定好的页面区域都可以定义Vue的组件，组件中包含了HTML模板、样式、Vue组件对象的定义。Vue的组件是包含页面设计在内的，是一种为页面某个设计区域提供独立支撑的解决方案或实例。

1、组件的定义

     组件一般通过单文件来定义，文件后缀名为“.vue”。无论组件是使用构建的方式还是不适用构建的方式，组件的定义中通常包含三个部分，分别是HTML的模板、style、Vue组件对象。使用构建的方式构建组件，最后也可以通过build的方式将工程内容转换为静态的非构建方式组件。组件的定义格式可参照如下：

<script setup lang="ts">
// 添加vue组件定义
</script&gt;

<template&gt;
<!-- 添加Vue组件对用的HTML模板 --&gt;
</template>

<style>
/* 为HTML模板增加对用的class  */
</style>

2、组件的使用

    Vue组件的使用有两种不同的方式，第一种是组件直接引用的局部引用方式，另一种是组件的全局引用方式。组件的具备引用方式是组件定义完成后，不注册为Vue的全局对象，使用时需要找到对应的组件定义文件，显示的在使用处注明。如下所示：

<script setup lang="ts">
import StandardForm from './components/StandardForm.vue';  //引入
// 添加vue组件定义
</script>

<template>
<!-- 添加Vue组件对用的HTML模板 -->
<StandardForm/> <!-- 使用 -->
</template>

<style>
/* 为HTML模板增加对用的class  */
</style>

另一种方式为全局引用方式。在组件定义完成后，需要在整个工程初始化时明确的注册组件。组件注册完成后，这个组件就是全局组件。在使用时不需要显式的引入就可以直接使用。比较组件的局部引用和全局引用，局部引用需要明确组件的定义文件位置，全局引用不需要明确组件的定义文件位置，但是需要在使用前有明确的全局注册。组件全局注册和使用的案例如下：

//组件注册：
import { createApp } from 'vue'

const app = createApp({})
app.component(
  // 注册的名字
'MyComponent',
// 组件的实现
  {
    /* add component code here */
  }
)

//组件的使用：
<!--  在调用全局组件的HTML模板中，直接添加-->
<MyComponent/>

组件使用过程中，组件的来源对组件的使用有很大的影响。局部引用的组件因需要直接指明组件的定义文件位置，所以组件的之间的依赖关系非常明显；全局引用的组件需要注册组件，使用时不会指明组件定义文件的具体位置，当工程非常庞大或者维护的非常差时，组件的依赖关系就有些模糊。因此除了公共依赖的组件和提供公共支持功能的组件之外，不要做全局注册。

3、组件的自定义属性

     组件上的自定义属性时参照HTML标签设置的。在使用组件时，必须显式的给组件的自定义属性赋值。组件的自定义属性如下所示：

<script setup lang="ts">
defineProps<{
  msg: string
}>()
</script>

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

使用时如下：

<HelloWorld msg="You did it!" />

组件的自定义属性和组件内部的数据或状态是不同的，即便它们之间可能有交集。组件的自定义属性是给别的组件用的，组件内部的数据或状态是给组件自己用的。

4、组件上的监听事件

      组件上除了有自定义属性之外，还可以有自定义事件的句柄，例如在整个组件上定义的点击事件、双击事件、输入事件等。将整个组件视为整体的一个HTML标签，那么标签上的监听事件就是仿照正常HTML标签的事件做处理，如将组件上的事件句柄给予一个确定的事件名称，暴露给使用者。使用者给这个暴露出来的事件句柄提供对应的事件处理函数。以下为组件上监听事件的案例：

   带有自定义属性和自定义事件的组件，如下：

<script setup lang="ts">
defineProps<{
  msg: string
}>()
defineEmits<{
  (e:"aclick",msg:string): void   
}>()
</script>

<template>
  <div @click="$emit('aclick')">
    <h1>{{ msg }}</h1>
  </div>
</template>

使用这个组件的父组件，如下：

<script setup lang="ts">
import {ref} from "vue"
import HelloWorld from './components/HelloWorld.vue'

const message=ref("You did it!");

function triggerClickOnHelloWorld(){
   console.log("Hello world");
   message.value="Hello World!";  
}
</script>

<template>
    <HelloWorld v-bind:msg="message" @aclick="triggerClickOnHelloWorld"/>
</template>

从以上案例可以看出，子组件中的自定义事件和自定义属性在父组件中是可以访问和处理的，子组件等同于一个独立不可拆分的HTML标签。父组件按照规则是不可以访问子组件内部的数据和状态，除非子组件的数据是作为自定义属性。

5、组件标签环绕的内容

      组件标签环绕的内容，类似于`<div>Hello Wrold</div>`，被环绕的内容也应该可以被组件解析。为了满足这种解析情况，Vue增加了插槽slot的标签，这个标签可以在组件定义时，指定环绕内容的位置。样例如下：

<script setup lang="ts">
defineProps<{
  msg: string
}>()
defineEmits<{
  (e:"aclick",msg:string): void
}>()
</script>

<template>
  <div @click="$emit('aclick')">
    <h1>{{ msg }}</h1>
    <slot></slot>  <!-- 指定插槽的位置-->
  </div>
</template>

实际使用时的处理：

<script setup lang="ts">
import {ref} from "vue"
import HelloWorld from './components/HelloWorld.vue'

const message=ref("You did it!");

function triggerClickOnHelloWorld(){
   console.log("Hello world");
   message.value="Hello World!";  
}
</script>

<template>
    <HelloWorld v-bind:msg="message" @aclick="triggerClickOnHelloWorld">
         This is the first slot
    </HelloWorld>
</template>

因为插槽实际的值是由使用组件的父组件确定，并有子组件的标签环绕，所有插槽的内容并不会在组件中变得混乱。当一个组件中有多个插槽时，那么在实际使用时，需要在组件环绕的内容中为每个插槽指定对应关系，如定义时名字a的插槽对应实际使用时名字为a的文段段落。更复杂一点，可能时动态的确定这种对应关系。

6、动态组件

    动态组件是指组件在页面上频繁切换，切换后，旧的组件内容将会被卸载掉。动态组件是利用类似于继承关系的原理，所有的组件都有公共的父类component，所有组件的定义都是component的子类，这样不同组件都是component的子类，所有的子类都是父类型的。在页面上使用component父类型时，需要使用is的动态属性指定其具体的实现子类型，即具体的组件。

<component :is="StandardForm"></component>

 需要动态切换类型时，只需要将具体的组件值用动态属性替换，动态属性受任意事件影响，其值在不同组件之间来回变动。这样就可以实现动态组件了。具体案例如下：

<script setup lang="ts">
import {shallowRef} from "vue"
import StudyVue from './components/StudyVue.vue';
import StandardForm from './components/StandardForm.vue';

const currentComponent=shallowRef(StudyVue);

function changeComp(){
  console.log("change component");
  if(StudyVue==currentComponent.value){
    currentComponent.value=StandardForm;
  }else{
    currentComponent.value=StudyVue;
  }
}
</script>

<template>
      <component :is="currentComponent"></component>
      <button type="button" @click="changeComp">切换组件</button>
</template>

7、组件模板的解析

    直接在DOM中编写模板的时候，注意驼峰格式名称有可能会解析成为连字符格式的名称。特殊位置下的标签，只能解析某种类型的标签，如tr、td、li等，可以将用is属性来解决。

<table>
  <tr is="vue:blog-post-row"></tr>
</table>

 如果是在标准的组件定义文件（单文件）、内联字符串模板（template:“）、<script type=”text/x-template”></script>中，则不需要考虑模板解析的问题。

代码007普通

打赏 收藏 海报 链接