关于vue.js:Vue内置组件介绍

内置组件

动静组件

• 动静组件实用于多个组件频繁切换的解决。
• <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 实例的子组件中，其根实例能够通过 $root property 进行拜访(子组件拜访)

  // 获取根组件的数据
  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 将会是一个蕴含了对应数据源的这些子组件的数组。

  依赖注入

• 应用 $parent property 无奈很好的扩大到更深层级的嵌套组件上。这也是依赖注入的用武之地，它用到了两个新的实例选项：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 这样真正的状态治理计划