内置组件
动静组件
- 动静组件实用于多个组件频繁切换的解决。
<component>用于将一个 ‘元组件’ 渲染为动静组件，以is属性值决定渲染哪个组件。is设置内容是个组件名称<div id="app"><component :is="'ComA'"></component> // 动静组件</div>用于实现多个组件的疾速切换,例如选项卡成果。
var ComA = { template: `<div>A组件内容 <input type="text"></div>`}var ComB = { template: `<div>B组件内容 <input type="text"></div>`}var ComC = { template: `<div>C组件内容 <input type="text"></div>`}new Vue({el:"#app",data:{ titles:['ComA','ComB','ComC'], currentCom:'ComA'},components:{ ComA,ComB,ComC}})<div id="app"><button v-for= 'title in titles' :key='title' @click="currentCom = title"> {{title}}</button><component :is="currentCom"></component></div>
is个性
is属性会在每次切换组件时，Vue都会创立一个新的组件实例。（tab切换时会销毁老组件，创立新组件）
- 例如：给子组件内增加一个输入框，输出内容后切换发现不会被保留
keep-alive组件
- 次要用于保留组件状态或防止组件从新渲染。
- 是一个形象组件：它本身不会渲染一个 DOM 元素，也不会呈现在组件的父组件链中
问题
- 动静组件component 的频繁切换回导致组件的从新渲染且无奈保留状态
解决
- 用标签包裹，不对组件进行从新渲染，保留组件外部状态（缓存）
is绑定的是属性/计算属性 。不是办法！
<keep-alive><component :is="currentCom" ></component></keep-alive>批改下面的tab切换
<div id="app">...<keep-alive> <component :is="currentCom"></component></keep-alive></div>
属性
官网地址
- include属性 用于指定哪些组件会被缓存，具备多种设置形式。
如果include是属性绑定，能够为他设置字符串，数组或者正则
include="ComA,ComB,ComC"留神不能加空格:include="['ComA','ComB','ComC']"能够间接写数组，也能够放data中。:include="/Com[ABC]/"
- exclude属性 不蕴含
max属性，最多缓存多少个
<keep-alive include="ComA,ComB,ComC"><component :is="currentCom"></component></keep-alive><keep-alive :include="['ComA','ComB','ComC']"><component :is="currentCom"></component></keep-alive><keep-alive :include="/Com[ABC]/"><component :is="currentCom"></component></keep-alive>
异步组件
- Vue 容许你以一个工厂函数的形式定义你的组件，这个工厂函数会异步解析你的组件定义。
- Vue 只有在这个组件须要被渲染的时候才会触发该工厂函数，且会把后果缓存起来供将来重渲染
异步组件async-example在1s后传递配置模板
Vue.component('async-example', function (resolve, reject) { setTimeout(function () { // 向 `resolve` 回调传递组件定义 resolve({ template: '<div>I am async!</div>' }) }, 1000)})异步组件与webpack代码宰割联合
Vue.component('async-webpack-example', function (resolve) { // 这个非凡的 `require` 语法将会通知 webpack // 主动将你的构建代码切割成多个包，这些包 // 会通过 Ajax 申请加载 require(['./my-async-component'], resolve)})ESM+ES6+写法
Vue.component( 'async-webpack-example', // 这个动静导入会返回一个 `Promise` 对象。 () => import('./my-async-component'))部分注册组件写法
new Vue({ // ... components: { 'my-component': () => import('./my-async-component') }})解决加载状态的工厂函数
const AsyncComponent = () => ({ // 须要加载的组件 (应该是一个 `Promise` 对象) component: import('./MyComponent.vue'), // 异步组件加载时应用的组件 loading: LoadingComponent, // 加载失败时应用的组件 error: ErrorComponent, // 展现加载时组件的延时工夫。默认值是 200 (毫秒) delay: 200, // 如果提供了超时工夫且组件加载也超时了， // 则应用加载失败时应用的组件。默认值是：`Infinity` timeout: 3000})- 理解下异步组件和同步组件区别
- 实现封装，传入须要加载的组件
拜访元素组件
在绝大多数状况下，咱们最好不要触达另一个组件实例外部或手动操作 DOM 元素。不过也的确在一些状况下做这些事件是适合的
拜访根组件
在每个 new Vue 实例的子组件中，其根实例能够通过
$rootproperty 进行拜访(子组件拜访)// 获取根组件的数据this.$root.foo// 写入根组件的数据this.$root.foo = 2// 拜访根组件的计算属性this.$root.bar// 调用根组件的办法this.$root.baz()留神：这个模式扩大到中大型利用来说就不然了。因而在绝大多数状况下，咱们强烈推荐应用
Vuex来治理利用的状态拜访父组件
应用
$parent,如果档次过深,容易失控，举荐依赖注入var map = this.$parent.map || this.$parent.$parent.map拜访子组件
只管存在
prop和事件，有的时候你仍可能须要在 JavaScript 里间接拜访一个子组件。为了达到这个目标，你能够通过ref这个attribute为子组件赋予一个ID援用<base-input ref="usernameInput"></base-input>this.$refs.usernameInput // 拜访这个子组件实例在父组件中能够获取子组件实例办法，调用应用
methods: {// 用来从父级组件聚焦输入框focus: function () { this.$refs.input.focus()}}this.$refs.usernameInput.focus() // 在父组件中调用留神：当
ref和v-for一起应用的时候，你失去的ref将会是一个蕴含了对应数据源的这些子组件的数组。依赖注入
- 应用
$parentproperty 无奈很好的扩大到更深层级的嵌套组件上。这也是依赖注入的用武之地，它用到了两个新的实例选项：provide和inject 实用
provide提供给后辈组件 数据/办法
问题<a><b> <c></c> // c要用a的getMap办法</b></a>解决方案： provide 和 inject
父组件
provide: function () { return { getMap: this.getMap }}任何后辈组件里增加实例属性 getMap
inject: ['getMap']- 此用法能够让咱们在任意后辈组件中拜访
getMap，而不须要裸露整个 父组件 实例 - 实际上，你能够把依赖注入看作一部分“大范畴无效的 prop” （隔代的props）
依赖注入毛病
- 它将你应用程序中的组件与它们以后的组织形式耦合起来，使重构变得更加艰难
- 所提供的 property 是非响应式的
- 如果你想在先人组件中更新所提供的数据，那么这意味着你可能须要换用一个像 Vuex 这样真正的状态治理计划