Vue课堂笔记知识总结（3）

组件

1. 理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image…..)

2. 为什么: 一个界面的功能很复杂

3. 作用: 复用编码, 简化项目编码, 提高运行效率

全局组件：Vue.component("组件名",{template:''})

局部组件：const steper={template:``}

注册组件：new Vue({components:{steper}})

使用组件：<steper></steper>

基本使用流程：1.引入组件        2.映射成标签        3.使用组件标签

 Vue脚手架

脚手架文档: https://cli.vuejs.org/zh/

具体步骤

第一步（仅第一次执行）：全局安装@vue/cli

npm install -g @vue/cli

第二步：切换到你要创建项目的目录，然后使用命令创建项目

vue create xxxx

第三步：启动项目

npm run serve

如出现下载缓慢请配置 npm 淘宝镜像：npm config set registry https://registry.npm.taobao.org

ref属性

1.功能：让组件接收外部传过来的数据

2.传递数据：<Demo name="xxx"/>

3.接收数据：

               第一种方式（只接收）：props:['name']

     第二种方式（限制类型）：props:{name:String}   

    第三种方式（限制类型、限制必要性、指定默认值）：  

props:{
    name:{
    type:String, //类型
    required:true, //必要性
    default:'老王' //默认值
    }
}

  备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

mixin(混入)

1.功能：可以把多个组件共用的配置提取成一个混入对象

2.使用方式：

        第一步定义混合：

{
    data(){....},
    methods:{....}
    ....
}

第二步使用混入：

        局混入：Vue.mixin(xxx) ​ 局部混入：mixins:['xxx']

插件

1.功能：用于增强Vue

2.本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

3.定义插件：

对象.install = function (Vue, options) {
    // 1. 添加全局过滤器
    Vue.filter(....)

    // 2. 添加全局指令
    Vue.directive(....)

    // 3. 配置全局混入(合)
    Vue.mixin(....)

    // 4. 添加实例方法
    Vue.prototype.$myMethod = function () {...}
    Vue.prototype.$myProperty = xxxx
}

4.使用插件：Vue.use()

scoped样式

1. 作用：让样式在局部生效，防止冲突。
2. 写法：<style scoped>

 组件的自定义事件

• 一种组件间通信的方式，适用于：子组件 ===> 父组件

• 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

• 绑定自定义事件：

第一种方式，在父组件中：<Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/>

第二种方式，在父组件中：

<Demo ref="demo"/>
......
mounted(){
   this.$refs.xxx.$on('atguigu',this.test)
}

若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

• 触发自定义事件：this.$emit('atguigu',数据)

• 解绑自定义事件this.$off('atguigu')

• 组件上也可以绑定原生DOM事件，需要使用native修饰符。

• 注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

 本次课堂笔记总结主要是跟这尚硅谷的老师一起学习的，笔记跟这老师一起总结的，有兴趣学前端的小伙伴可以再B站搜索尚硅谷跟着老师一起学习，老师讲课非常棒。