vue组件

组件概念

html、css、js 的集合体，为该集合体命名，用该名字复用html、css与js组成的集合体 复用性

组件分类：

• 根组件：new Vue() 生成的组件
• 局部组件: 组件名={} 内部采用的是vue语法
• 全局组件： vue.component('组件名', {}, {})

组件的特点：

• 组件都有管理组件html 页面结果 的 template 实例成员，template中有且只有一个根标签
• 根组件都是作为最顶层父组件， 局部与全局组件作为子组件，也可以成为其他局部与全局的父组件
• 子组件的数据需要隔离（数据组件化，每一个组件拥有自己的数据的独立名称空间）
• 局部组件必须注册后才能使用，全局组件不需要注册，提倡使用局部组件
• 组件中出现的所有的变量，都由该组件自己提供管理
• 局部全局和根组件都是一个vue实例，一个实例对应一套html、css、js结构，所以实例就是组件

根组件

    
    



    
{{ msg }}
    

挂载点 本质上是被组件 template 模块进行替换的占位符

总结：

• 根组件 可以不明确template，template默认采用挂载点 页面结构，如果设置的template，挂载点内部的内容无效

局部组件

全局组件

数据的组件化

父组件传递数据给子组件

总结：

• 子组件可以通过props自定义组件属性 （采用反射机制，需要填写字符串，但是使用时可以直接作为变量）
• 子组件会在父组件中渲染，渲染时，将父组件的变量绑定给子组件的自定义属性，就可以将变量值传递给子组件。

子组件传递数据给父组件

自定义组件标签的事件：

• 事件是属于子组件的，子组件在父组件中渲染并绑定事件方法，所以事件方法由父组件来实现

子组件如何触发自定义事件：this.$emit('自定义事件名', '触发事件回调的参数')

子组件触发自定义事件，携带出子组件的内容，在父组件中实现自定义事件的方法，拿到子组件传递给父组件的消息

    
    



    
{{ h1 }}
    
{{ h2 }}
    
    

    

Vue项目环境搭建

1、安装node

官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/

2、换源安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

3、安装vue项目脚手架

cnpm install -g @vue/cli

4、清空npm缓存

2或3终端安装失败时，可以清空 npm缓存 再重复执行失败的步骤

npm cache clean --force