最基本的前端是HTML+CSS+Javascript。掌握这三项技术算是入门，但也只是入门而已。现在前端开发的定义远不止于此。前端小课堂（HTML/CSS/JS），本着提高技术水平，夯实基础知识的中心思想，开课（每周四）。Vue组件组件开发在Vue使用中非常普遍，有解耦、并行开发、复用等诸多好处。使用起来也很简单，我们可以对比一下elementUI的el-input和原来的input。Registration组件可以理解为一个可重用的Vue实例，所以它接收和newVue一样的options，比如data,computed,watch、方法和生命周期挂钩。全局注册的组件是通过Vue.component全局注册的，注册后可以在任何地方使用，包括组件树中所有子组件的模板。//定义一个名为v-input的全局组件Vue.component('v-input',{data:function(){//data必须是一个函数//这样多个组件可以在多个位置使用没有引用relationshipreturn{val:''}},//templatemusthavearootnode.//Everycomponentmusthaveasinglerootelement(everycomponentmusthaveasinglerootelement)模板：`val:{{val}}.
`})组件的部分注册部分注册写在组件中，只能在当前组件模板中使用。newVue({el:'#app',components:{'v-input':{data:function(){//data必须是函数//这样在多个地方使用时，多个组件不存在Referencerelationshipreturn{val:''}},//模板必须有一个根节点。模板：`val：{{val}}。
`}})组件通信父子组件父组件传递值props给子组件父组件：Subcomponent:Vue.component('v-avatar',{props:['avatar'],template:''})子组件传值给父组件$emit测试地址：https://www.lilnong.top/static/html/sf-a-1190000022616927-vue-emit.html父组件：子组件：Vue.component('v-input',{props:['val'],template:'',methods:{emitInput(e){this.$emit('input',e.target.value)}}})使用v-模型，我们在使用中一般采用v-model的方式。那么v-model是如何实现父子组件的对应关系呢？原生DOM等同于自定义组件等同于/v-input>从上面我们可以看出v-model类似于语法糖，本质上是通过绑定value和input来使用.sync修饰符等同于在更新时component:this.$emit('update:title',newTitle)在某些情况下，我们需要“双向绑定”一个prop。不幸的是，真正的双向绑定会带来维护成本的问题，因为子组件可以改变父组件，父组件和子组件都没有明显的变化源，建议使用this.$emit('update:myPropName')的方式触发事件。公众号：前端力农参考前端培训目录，前端培训规划，前端培训计划
