# Vue实战培训 <br> ## 1 培训简介 ### 1.1 内容 本次培训是一次代码实战培训，首先在了解了Vue组件核心概念和通信方式之后，将以Vue工程实现具体客开需求的角度给 大家一个更加具体的实战学习。 ### 1.2 目标 认真学完之后，大家将能够初步上手使用Vue工程及组件等开发客开需求。 <br><br> ## 2 Vue组件 ### 2.1 Vue组件介绍 组件是可复用的 Vue 实例，且带有一个名字。所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、 methods 以及生命周期钩子等。可以将组件进行任意次数的复用，一个组件的 data 选项必须是一个函数，因此每个实例 可以维护一份被返回对象的独立的拷贝。 ::: demo ```js Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' }) ``` ::: <a href="https://codepen.io/cyt68/pen/MWwpmdm" target="_blank">在线运行示例</a> ### 2.2 vue组件三大核心概念 <img src='https://t1.picb.cc/uploads/2020/03/04/k37edR.png'> 2.2.1 属性 自定义属性props：prop 定义了这个组件有哪些可配置的属性 inheritAttrs：默认情况下父作用域的不被认作 props 的特性绑定将会“回退”且作为普通的 HTML 特性应用在 子组件的根元素上。可通过设置 inheritAttrs 为 false，这些默认行为将会被去掉。 注意：这个选项不影响 class 和 style 绑定。 data与props：data 被称之为动态数据，在各自实例中，在任何情况下，我们都可以随意改变它的数据类型和数据 结构，不会被任何环境所影响。props 被称之为静态数据，在各自实例中，一旦在初始化被定义好类 型时，基于 Vue 是单向数据流，在数据传递时始终不能改变它的数据类型，而且不允许在子组件中 直接操作 传递过来的props数据，而是需要通过别的手段，改变传递源中的数据。 单向数据流：props的数据都是通过父组件或者更高层级的组件数据或者字面量的方式进行传递的，不允许直接操作 改变各自实例中的 props数据，而是需要通过别的手段，改变传递源中的数据。 2.2.2 事件 事件修饰符 2.2.3 插槽 普通插槽和作用域插槽 <br><br> ## 3 Vue组件间通信 ### 3.1 通过 Prop 向子组件传递数据，子组件可以通过调用内建的 $emit 方法 并传入事件名称来触发一个事件 Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了 那个组件实例的一个属性。 ::: demo ```js Vue.component('button-counter1', { props: ['count'], template: '<button v-on:click="emitAdd">You clicked me {{ count }} times.</button>', methods: { emitAdd() { this.$emit('add'); } } }) ``` ::: ### 3.2 利用事件总线通知事件 这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何 组件间的通信，包括父子、兄弟、跨级。 ::: demo ```js var Event=new Vue(); Event.$emit(事件名, 数据); Event.$on(事件名, data => {}); ``` ::: ### 3.3 $parent / $children与 ref ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例 $parent / $children：访问父 / 子实例 其他还有vuex，provide/inject，$attrs/$listeners等方式。 概念了解之后，我们用实际项目来学习一下。