首页  >  文章  >  vue有几大组件

vue有几大组件

青灯夜游
青灯夜游原创
2022-12-13 19:02:227045浏览

vue有4大组件:1、全局组件,用“app.component(...)”方法来注册全局组件,全局组件可在应用的任何组件模板中使用。2、局部组件,是在一个(父)组件中的“components”选项中注册的组件。3、动态组件,指根据给属性is绑定值的不同来渲染不同名称的组件。4、异步组件,在加载页面时并不立即渲染,而是要等带一些业务逻辑完成后,才会执行组件内的逻辑和渲染到页面上。

vue有几大组件

本教程操作环境:windows7系统、vue3版,DELL G3电脑。

Vue 的组件本质上是一个具有预定义选项的实例,我们使用小型的、独立和通常可复用的组件,通过层层拼装,最终形成了一个完整的页面。

组件必须先注册以便 Vue 应用能够识别,有两种组件的注册类型:

  • 全局注册
  • 局部注册

全局组件

(在根组件中)使用 方法app.component('component-Name', {}) 来注册全局组件,全局注册的组件可以在应用中的任何组件的模板中使用。(学习视频分享:vuejs入门教程编程基础视频

其中第一个参数时组件名,推荐遵循 W3C 规范中的自定义组件名(避免与当前以及未来的 HTML 元素发生冲突):字母全小写必须包含一个连字符。第二个参数是组件的配置选项。

const app = Vue.createApp();
app.component('my-component', {
    template: `<h1>Hello World!</h1>`
});
const vm = app.mount(&#39;#app&#39;)

⚠️ 全局组件虽然可以方便地在各种组件中使用(包括其各自的内部),但是这可能造成构建项目时体积增大,用户下载 JavaScript 的无谓增加。

需要在app.mount('#app') 应用挂载到 DOM 之前进行全局组件的注册

局部组件

在一个(父)组件中组件的 components 选项中注册的组件。

这些子组件通过一个普通的 JavaScript 对象来定义,其接收的参数和全局组件一样,但是它们只能在该父组件中使用,称为局部组件。

对于 components 对象中的每个 property 来说,其 property 名就是自定义元素的名字,其 property 值就是这个组件的选项对象。

const ComponentA = {
  /* ... */
}
const ComponentB = {
  /* ... */
}
const ComponentC = {
  /* ... */
}
// 然后在父组件的 `components` 选项中定义你想要使用的组件
const app = Vue.createApp({
  components: {
    &#39;component-a&#39;: ComponentA,
    &#39;component-b&#39;: ComponentB
  }
})

动态组件

动态组件指根据给属性 is绑定值的不同来渲染不同名称的组件。

内置的标签 9dffaea1a1a8b4cfb6f03808bcbc9c35" 用以动态显式不同的组件,通过控制绑定在属性 is 上的参数值,即可显示相应的同名组件。

属性 is 可以是:

有时候为了在切换时,保存动态组件的状态,例如组件中的输入框的值,可以用标签 7c9485ff8c3cba5ae9343ed63c2dc3f776c72b6c0750de65f93a5445ee8cabd8 包裹动态组件

属性 is 还可以用于解决 HTML 元素嵌套的规则限制,将它应用到原生的 HTML 标签上,它的值就是组件名,这样原生标签实际渲染出来的内容就是组件。

因为对于 ff6d136ddc5fdfeffaf53ff6ee95f185c34106e0b4e09414b63b2ea253ff83d6f5d188ed2c074f8b944552db028f98a1221f08282418e2996498697df914ce4e 这些元素,其内部允许放置的直接子元素是有严格限制的,如果嵌入其他元素会被视为无效的内容,而提升到外部造成最终渲染问题。但如果我们需要在这些元素中使用组件作为直接子元素,则可以在「合法」的子元素上使用属性 is,指定渲染的实际内容,这时属性 is 用在原生的 HTML 元素上,如 a34de1251f0d9fe1e645927f19a896e8 其值 需要使用 vue: 作为前缀,以表示解析的实际上是一个 Vue 组件

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

但以上限制只是在 HTML 中直接使用 Vue 模板时才会遇到,如果是在一下前进使用模板就没有这种限制:

  • 字符串,例如 template: '...'
  • 单文件组件 .vue
  • 91bc4aaf1732b26c8e5fcf53781ed1a6

异步组件

现在的大型网页往往需要异步获取不同的数据,Vue 有一个 defineAsyncComponent 方法定义异步组件,以优化应用的加载和用户体验。

异步组件在加载页面时并不立即渲染,而是要等带一些业务逻辑完成后,才会执行组件内的逻辑和渲染到页面上。

// 全局组件
app.component(&#39;async-example&#39;, Vue.defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    resolve({
      template: &#39;<div>I am async!</div>&#39;
    })
  })
}))

// 局部组件
import { createApp, defineAsyncComponent } from &#39;vue&#39;

createApp({
  // ...
  components: {
    AsyncComponent: defineAsyncComponent(() => {
      return new Promise((resolve, reject) => {
        resolve({
          template: &#39;<div>I am async!</div>&#39;
        })
      })
    })
  }
})

异步组件的注册和一般的同步组件类似,如果是注册全局组件,也是使用 app.component()进行注册,不过第二个参数使用 Vue.defineAsyncComponent() 方法告诉 Vue 应用该组件是异步组件

defineAsyncComponent() 方法的参数是一个匿名函数,而且函数是返回一个 Promise。在 Promise 内应该 resovlve({}) 一个对象,其中包含了构建组件相关配置参数。只有当 Promise resolvereject 才执行异步组件的处理。

(学习视频分享:vuejs入门教程编程基础视频

以上是vue有几大组件的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn