vue组件化编程

目录

组件是什么

组件化编程

单文件组件

关于VueComponent

内置关系

---

组件是什么

在vue中，组件是用来实现局部(特定)功能效果的代码集合(html/css/js/image…..)，好处是可以复用编码, 简化项目编码, 提高运行效率。

组件化编程

当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用,。

组件化编程又有两种写法，分别是非单文件组件和单文件组件，而非单文件组件在真正开发中几乎不用，所以在这里就主要写单文件组件的写法。

单文件组件

每一个.vue文件就是一个组件，

.vue文件的组成(每一个组件的文件后缀名则是.vue)

<template>
//页面模板
</template>

<script>
    export default {
        name:组件名,
        data() {
            return {
            }}, 
}
</script>

<style>
样式定义
</style>

•  template标签内写HTML
• script标签内写js
• style标签内写css

Vue中使用组件的三大步骤：

• 定义组件(创建组件)

  • 上面的例子则是最简单的一共组件，什么内容都没有。

  • 需要注意的是：

    • 在组件中el不需要写，最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。

    • data必须写成函数形式，避免组件被复用时，数据存在引用关系。

    • name属性不是必须的，但是最好都写上，指定组件在开发者工具中呈现的名字。

    • 组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。

• 注册组件

  • 在vm中添加components配置项即可

//第二步：注册组件（局部注册）
components:{
    //组件名
}

• 使用组件(写组件标签)

  • <组件名></组件名>

  • <组件名/>

  • 上面两种方式都可以使用。

关于VueComponent

组件的本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。

我们只需要在template标签内使用组件，Vue解析时会帮我们创建组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。特别注意：每次调用Vue.extend（作用是创建组件），返回的都是一个全新的VueComponent！不同组件中即使数据名相同，也不会互相影响。

VueComponent的实例对象（组件）也可以称之为组件实例对象。在组件中的this指向都是VueComponent实例对象。

内置关系

一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype

作用是可以让组件实例对象可以访问到 Vue原型上的属性、方法。