laydate组件 无法传值_VUE开发之组件

Vue 是一套用于构建用户界面的渐进式框架，使用该框架，可以完全在浏览器端渲染页面，服务端只提供数据，非常方便的构建单页面应用。组件(Component)是 Vue.js 最强大的功能之一。

1如何理解组件

    组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。所有的 Vue 组件同时也都是 Vue 实例，因此它在定义时也会接收：data、methods、生命周期函数等，不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。 

     简单理解，每个Page就是一个组件 (注册组件、登录组件...)，Page的组成部分 (轮播图、选项卡...)也可以是一个组件，组件其实就是一个独立的 HTML，它的内部可能有各种结构、样式、逻辑，某些地方来说有些像iframe，但它与 iframe 又完全不同，iframe 是一个独立封闭的内容，而组件既是一个独立的内容，还是一个受引入页面控制的内容。

     通常一个应用会以一棵嵌套的组件树的形式来组织：

     例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

2

为什么要使用组件

    举个简单的列子，项目中有一个日历模块，多个页面都要用这个日历，而每个页面的日历都存在一些差别，如果不使用组件，我要完成这个项目，做到各个页面的日历大体一致，而部分地方存在差异，我可能就需要写几套日历代码了。

    而使用组件呢？一套代码，一个标签，然后分别在不同地方引用，根据不同的需求进行差异控制即可。

    假设把日历模块封装为一个名为calender的组件，可以通过给 calendar 传递值实现在本页面对日历的控制，让它满足我这个页面的某些单独需求。

3组件的使用和注册

    我们把创建一个组件称为注册组件，如果你把组件理解成为变量，那么注册组件你就可以理解为声明变量。我们通过 Vue.component 来注册一个全局组件。下面的代码即注册了一个名为MyComponent的组件。需要注意的是全局组件的注册必须写在Vue实例之前，注册后在项目的任何地方都能直接使用。

    全局组件一旦注册，就意味着即便以后你不再使用这个组件，它依然会随着Vue的加载而加载。因此，对于一些并不频繁使用的组件，就采用局部注册。下面的代码即为在一个vue实例中注册了一个名为MyComponent的组件。该组件只能在此实例中使用。 组件使用起来很方便，且可以复用，代码如下：4组件之间的嵌套与通信

  组件设计初衷就是要配合使用的，最常见的就是形成父子组件的关系：组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信：父组件可能要给子组件下发数据，子组件则可能要将它内部发生的事情告知父组件。

     每个组件的作用域都是独立的，所以在组件嵌套使用的时候子组件不能直接使用父组件中的数据。

  父组件传数据给子组件，常用的有两种方式，一是用prop传递： 二是使用$ref获取指定的子组件：

 子组件使用$emit传递事件给父组件，父组件监听该事件：

  非父子组件间使用事件总线进行通信，原理上就是建立一个公共的js文件，专门用来传递消息，如bus.js，该js文件的内容如下：  

 在需要传值出来的组件中：

 在接收值的组件中：

END

分享PPT

网盘链接：https://pan.baidu.com/s/1b44YT-LtTaFYqUg0XWyAmQ

提取码：ppby