乐趣区

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

jiezi

内置组件

动静组件

  • 动静组件实用于多个组件频繁切换的解决。
  • <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 这样真正的状态治理计划
退出移动版