vue2脚手架之自定义组件的总结

前言

vue脚手架的作用是用来自动一键生成vue webpack的项目模版，包括依赖库，免去你手动安装各种插件，寻找各种cdn并一个个引入的麻烦。

vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。

vue-cli是有Vue提供的一个官方cli，专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js webpack的项目模板，是为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载，保存时 lint 校验，以及生产环境可用的构建版本

是一个快速构建 vue 项目的工具，通过他，我们可以将 vue 所需要的插件安装完成。

vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，

相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK。

-       -...">当我们给一个组件添加原生的dom事件时，如(给组件上添加一个@click点击事件)： App.vue:         ...         <StudentLqj ref="student" @click.native="show"></StudentLqj>         ...

        show(){                 alert('123')         }

        这样的话我们点击页面中的<StudentLqj/>这个组件时，就可以出现绑定的         alert事件了。         注意：如果我们只写（@click=“xxx”）是不起作用的，我们必须这样写：         @click.native="xxx"

展示结果：但我们绑定完一个点击事件给子组件时，点击组件的范围就会出现相应的结果！

原理：

 观察上图我们可以发现所有子组件中的跟标签<div>只有一个，也只能为一个，如果多写会报错！

 当我们在app.vue给子组件绑定事件时，其实vue自动的给我们子组件的最外部的跟标签<div/>在添加相应的事件！

自定义组件的总结：

或 -               -2.第二种方式，在父组件中： -               - -               -...... -               -mounted(){ -                       -this.$refs.xxx.$on('atlqj',this.test) -               -} -               -3.若想让自定义事件只触发一次，可以使用once修饰符，或$once方法。 - 4.触发自定义事件：this.$emit('atlqj',数据) - 5.解绑自定义事件this.$off('atlqj') - 6.组件上也可以绑定原生DOM事件，需要使用native修饰符。 - 7.注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！">1.一种组件通信的方式，适用于：子组件====>父组件 2.使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。 3.绑定自定义事件：                 1.第一种方式，在父组件中：                 <Demo @atlqj="test"/>或<Demo v-on:atlqj="test"/>                 2.第二种方式，在父组件中：                 <Demo ref="demo"/>                 ......                 mounted(){                         this.$refs.xxx.$on('atlqj',this.test)                 }                 3.若想让自定义事件只触发一次，可以使用once修饰符，或$once方法。  4.触发自定义事件：this.$emit('atlqj',数据)  5.解绑自定义事件this.$off('atlqj')  6.组件上也可以绑定原生DOM事件，需要使用native修饰符。  7.注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！