vue中iframe框架_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 组件的使⽤和注册
我们把创建⼀个组件称为注册组件，如果你把组件理解成为变量，那么注册组件你就可以理解为声明变量。我们通过 Vueponent 来注册⼀个全局组件。下⾯的代码即注册了⼀个名为MyComponent的组件。需要注意的是全局组件的注册必须写在Vue实例之前，注册后在项⽬的任何地⽅都能直接使⽤。
全局组件⼀旦注册，就意味着即便以后你不再使⽤这个组件，它依然会随着Vue的加载⽽加载。因此，对于⼀些并不频繁使⽤的组件，就采⽤局部注册。下⾯的代码即为在⼀个vue实例中注册了⼀个名为MyComponent的组件。该组件只能在此实例中使⽤。
组件使⽤起来很⽅便，且可以复⽤，代码如下：
4 组件之间的嵌套与通信
组件设计初衷就是要配合使⽤的，最常见的就是形成⽗⼦组件的关系：组件 A 在它的模板中使⽤了组件 B。它们之间必然需要相互通信：⽗组件可能要给⼦组件下发数据，⼦组件则可能要将它内部发⽣的事情告知⽗组件。
每个组件的作⽤域都是独⽴的，所以在组件嵌套使⽤的时候⼦组件不能直接使⽤⽗组件中的数据。
⽗组件传数据给⼦组件，常⽤的有两种⽅式，⼀是⽤prop传递：  ⼆是 使⽤$ref获取指定的⼦组件：
⼦组件使⽤$emit传递事件给⽗组件，⽗组件监听该事件：
iframe嵌套页面加载慢⾮⽗⼦组件间使⽤事件总线进⾏通信，原理上就是建⽴⼀个公共的js⽂件，专门⽤来传递消息，如bus.js，该js⽂件的内容如下：
在需要传值出来的组件中：
在接收值的组件中：
END
分享PPT
提取码：ppby

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。