vue组件

组件

vue中的组件

Vue中的组件化开发就是把网页的重复代码抽取出来，封装成一个个可复用的视图组件，然后将这些视图组件拼接到一块就构成了一个完整的系统。

这种方式非常灵活，可以极大的提高我们开发和维护的效率。

通常一套系统会以一颗嵌套的组件树的形式来组织

组件的组成部分

组件就是对局部视图的封装，每个组件包含了

• HTML 结构
• CSS 样式
• JavaScript 行为
• • data 数据
  • methods 行为

为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。

有两种组件的注册类型：全局注册和局部注册

全局组件

一般把网页中特殊的公共部分注册为全局组件：轮播图、分页、通用导航栏

<div id="app">
    <!-- <component-global/> -->
    <component-global></component-global>
</div>

// 全局注册组件
/* 
      组件名：
         可使用大驼峰(PascalCase)或者横线分隔(kebab-case)命名方式
         但 DOM 中只能使用横线分隔方式进行引用组件
    */
Vue.component("component-global", {
    // template 选项指定此组件的模板代码
    template: `<div><h1>头部组件-{{name}}</h1></div>`,
    //data必须是函数
    data: function(){
        return {
            name: "全局组件"
        }
    },
    methods: {}
})
new Vue({
    el: "#app"
})

组件名

可使用大驼峰(PascalCase)或者横线分隔(kebab-case)命名方式 但 DOM 中只能使用横线分隔方式进行引用组件

局部组件

全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件

组件化注意事项

组件可以理解为特殊的vue实例，不需要手动实例化，管理自己的template模版

组件的template必须有且只有一个根节点

组件的data选项必须是函数，且函数体返回一个对象，因此每个实例可以维护一份被返回对象的独立的拷贝，如果 Vue 没有这条规则，操作数据会影响到其它所有实例：

组件与组件之间是相互独立的，可以配置自己的一些选项资源data、methods、computed等等

思想：组件自己管理自己，不影响别人

脚手架工具vue-cli

安装

全局安装vue、vue-cli

npm install vue -g
npm install vue-cli -g  //主要安装

检测版本号

vue -V

初始化

vue init webpack 项目名称 //vue init webpack apps 项目名称小写，大写会有错误提示修改

选项

• project name 项目名称（名称必须全部小写）
• Project description 项目描述
• Author 作者
• Vue build 打包方式
• Install vue-router 是否使用路由
• Use ESLint to lint your code? 代码规范 否~
• Set up unit tests 是否安装单元测试
• Setup e2e tests with Nightwatch? 是否使用e2e测试
• Should we run npm install for you after the project has been created?是否使用npm

项目结构

单文件组件(.vue)

定义组件时存在的问题

• 全局定义强制要求每个component中的命名不得重复
• 字符串模版缺乏语法高亮，在HTML有多行的时候，写起来很麻烦
• 不支持css，一位置当HTML和JS组件化时，css明显被遗漏
• 没有构建步骤，限制只能使用HTML和ES5 JavaScript，而不能使用预处理器，如babel

文件扩展名为.vue的单文件组件为以上所有的问题提供了解决方法，并且还可以使用webpack或Browerify等构建工具。

单文件组件模版格式

<template>
    <!-- 组件的模版 -->
    <p>{{ greeting }} World!</p>
</template>

<script>
    // 组件的js
    // 已经帮我们解决了在浏览器端的模块化问题
    export default {
        data: function () {
            return {
                greeting: "Hello",
            };
        },
    };
</script>

<!-- 使用scoprd属性，使样式只在当前组件生效 -->
<style scoped>
    p {
        font-size: 2em;
        text-align: center;
    }
</style>’

局部组件如何注册为全局组件使用

import local from "./local"
Vue.component(local.name,local)

import local from "./local"

export default {
    install:(Vue)=>{
        Vue.component(local.name,local)
    }
}
// main.js
import plugin from "./plugin"
Vue.use(plugin)

如何注册全局方法

// Vue.prototype.$自定义方法名=函数
Vue.prototype.$getFormData = function(params) {
  console.log(params);
}

// 调用方式--任何组件内
this.$getFormData('id')