【Vue组件详细介绍】

发布时间:2024年01月18日

1. Vue组件

Vue 是一套构建用户界面的渐进式框架,常用于构建单页面应用(SPAs)和交互式界面,Vue 核心重点在于视图层,但它也易于整合进现有的项目中去或者配合其它库使用,Vue 组合是框架中的关键抽象,它们允许你通过一个独立和可复用的单元为用户界面构建部件。

1.1 组件介绍

组件(Component)是Vue最强大的功能之一,
组件可以扩展HTML元素,封装可重用的代码
组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树
组件可以分为全局组件和局部组件

组件命名规则

短横线命名,如: my-component,vue推荐使用这种方式的命名规则
首字母大写命名规则,如:MyComponent

props

props是父组件用来传递数据的一个自定义属性。
父组件的数据需要通过props把数据传给子组件,子组件需要显式地用props选项声明 "prop"

1.2 局部组件

定义语法:new Vue({el:‘#d1’,components:{组件名:{配置选项}}})

<div id="app">
     <div>
         <!--title是用来传值的自定义属性,在自定义组件的props中定义 -->
         <button-counter title="测试"/>
     </div>
</div>
var vm = new Vue({
    el: '#app',
    data: {
        ts: new Date().getTime()
    },

    //局部自定义组件
    components: {
    
        //组件名: {配置项}
        'button-counter':  {
            
            //用来传值的自定义属性
            props:['title'],

            //模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素
            template: '<button @click="doClick">{{title}}:局部组件,点击计数器:{{count}}</button>',

            //注意:在自定义的组件中需要使用函数来定义data
            data: function() {
                return {
                    count: 0
                }
            },
            
            //定义响应事件函数
            methods: {
                doClick: function() {
                    //注意此处this的作用返回是自定义组件,而不是上面声明
                    //的vue实例.
                    this.count++;
                }
            }
        }
    }
});

注:为什么在自定义组件中必须使用函数方式来什么data?
每个自定义组件使用函数方式来声明data,这样每个实例可以维护一份被返回对象的独立的拷贝,在定义自定义组件时,一定要注意这一点。

1.3 全局组件

将上面的局部组件修改为全局组件。
全局组件定义语法:Vue.component(组件名, 配置选项)

<div id="app">
    <div>
        <button-counter title="测试"/>
    </div>
</div>
//全局组件
Vue.component('button-counter', {

    //用来传值的自定义属性
    props:['title'],
    
    //模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素
    template: '<button @click="doClick">{{title}}: 全局组件,点击计数器:{{count}}</button>',

    //注意:在自定义的组件中需要使用函数来定义data
    data: function() {
        return {
            count: 0
        }
    },
    
    //定义响应事件函数
    methods: {
        doClick: function() {
            //注意此处this的作用返回是自定义组件,而不是上面声明
            //的vue实例.
            this.count++;
        }
    }
});

var vm = new Vue({
    el: '#app',
    data: {
        ts: new Date().getTime()
    }
});

每个 Vue 组件本质上是一个拥有预定义选项的 Vue 实例。下面我将通过主要特性详细介绍 Vue 组件的各个方面:

2. 组件定义

在 Vue 中,组件可以用多种方法定义,最简单的方法是一个对象字面量:

// 定义一个新组件叫做 `my-component`
Vue.component('my-component', {
  // 选项...
})

这里,Vue.component 是用于注册全局组件的方法,它接受两个参数:组件的名字和一个选项对象,这个选项对象可以指定组件的数据、模板、方法、生命周期钩子等。

组件也可以以局部注册的方式存在,即在其他组件的选项对象中的 components 属性定义:

var Child = {
  // 选项...
}

var Parent = new Vue({
  components: {
    'my-component': Child
  }
})

3. 组件模板

组件的模板定义了组件的 HTML 结构。它通常在单文件组件(.vue 文件)的 <template> 标签内书写或者在组件对象的 template 属性中定义。

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

为了内联模板,Vue 提供了 template 选项,但是如果模板比较大,建议使用 .vue 单文件组件。

4. 组件数据

每个组件实例都有自己独立的作用域。组件的数据必须是一个函数,以便每个实例可以维护一份被返回对象的独立的拷贝:

Vue.component('my-component', {
  data: function () {
    return {
      count: 0
    }
  }
})

5. 组件的通信

  • 父组件通过 props 向子组件传递数据。
  • 子组件通过事件向父组件发送消息。

6. 组件生命周期

组件实例有其生命周期,有多个钩子函数可在特定时点执行,比如 createdmountedupdateddestroyed 等。

7. 组件插槽 (Slots)

插槽允许组件模板中包含可替换的内容,使得子组件可以插入内容到父组件。

8. 动态组件与异步组件

  • keep-alive 可以实现组件的缓存,当组件切换时不会进行销毁。
  • 通过 Vue.component 注册的异步组件允许我们将组件定义为一个工厂函数,这个函数异步解决组件的定义。

9. 组件样式封装

使用单文件组件时,在 <style> 标签中可以通过 scoped 属性定义组件的 CSS 只作用于当前组件。

10. 组件过渡与动画

Vue 提供了 <transition><transition-group> 组件来帮助实现 CSS 过渡和动画。

11. 边界情况处理

对于一些如对本地 DOM 的访问、全局事件监听等边界情况,Vue 提供了实例方法和特性来处理。

Vue 组件是构建大型应用的基石,也使得前端界面的开发变得模块化和维护起来更加方便,在实践中,学习利用好组件的各种特性是非常关键的。

文章来源:https://blog.csdn.net/cz88888888666/article/details/135616313
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。