1、.sync 修饰符

  2.3.0+ 新增

  vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定。类似于v-model的效果

  例子:

this.$emit('update:title', newTitle)

然后父组件可以监听那个事件并根据需要更新一个本地的数据属性

<text-document
v-bind:title="doc.title"
v-on:update:title="doc.title = $event"
></text-document>

使用.sync 修饰符代替

<text-document v-bind:title.sync="doc.title"></text-document>

https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6

2、keep-alive

  <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。

<!-- 失活的组件将会被缓存!-->
<keep-alive>
<component v-bind:is="currentTabComponent"></component>
</keep-alive>

https://cn.vuejs.org/v2/api/#keep-alive

3、异步组件

  只在需要的时候才从服务器加载一个模块。Vue 允许你以一个工厂函数的方式定义你的组件,这个工厂函数会异步解析你的组件定义

new Vue({
// ...
components: {
'my-component': () => import('./my-async-component')
}
})

  require.ensure()实现按需加载

4、处理边界情况

  1.访问根实例:在每个 new Vue 实例的子组件中,其根实例可以通过 $root 属性进行访问

// 获取根组件的数据
this.$root.foo

   很少用,应为一般使用Vuex 来管理应用的状态

  2.访问子组件实例或子元素:通过 ref 特性为这个子组件赋予一个 ID 引用

<input ref="input">
methods: {
// 用来从父级组件聚焦输入框
focus: function () {
this.$refs.input.focus()
}
}

  3.依赖注入:

    实例选项:provide 和 inject

provide: function () {
return {
getMap: this.getMap
}
}
inject: ['getMap']

5、混入 (mixins)

  混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。

// 定义一个混入对象
var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
} // 定义一个使用混入对象的组件
var Component = Vue.extend({
mixins: [myMixin]
}) var component = new Component() // => "hello from mixin!"

  https://cn.vuejs.org/v2/guide/mixins.html

6、Vue.set( target, key, value )向响应式对象中添加一个属性

  • 参数:

    • {Object | Array} target
    • {string | number} key
    • {any} value
  • 返回值:设置的值。

  • 用法:

    向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')

7、(转)vue项目的一些心得

七、vue语法补充二(动态组件 & 异步组件、访问元素 & 组件、混入)的更多相关文章

  1. Vue父子组件传值之——访问根组件$root、$parent、$children和$refs

    Vue组件传值除了prop和$emit,我们还可以直接获取组件对象: 根组件: $root // 单一对象 表示当前组件树的根 Vue 实例,即new Vue({...根组件内容}).如果当前实例没有 ...

  2. 四、vue语法补充

    1.自定义过滤器 格式: {{ msg | filters}} 2.computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter <!DOCTYPE html> ...

  3. vue语法概要二

    函数 用途 类别 v-html 用于输出html格式的数据 输出 v-bing 用于输出值 输出 v-model 双向绑定 输入和输出 v-if 逻辑判断 分支语句 v-else 同上 分支语句 v- ...

  4. vuex+Es6语法补充-Promise

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,采用 集中式存储管理 单页面的状态管理/多页面状态管理 使用步骤: // 1.导入 import Vuex from 'vuex' // ...

  5. vue语法精简(方便开发查阅)

    vue语法精简(方便开发查阅) 指令 特殊的标签和属性 变异方法 事件修饰符 按键修饰符 表单修饰符 生命周期函数 计算属性 监听属性 子组件通过事件向父组件传递信息 在组件上使用v-model 动画 ...

  6. vue教程3-05 vue组件数据传递、父子组件数据获取,slot,router路由

    vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...

  7. vue深入了解组件——动态组件&异步组件

    一.在动态组件上使用 keep-alive 我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件: <component v-bind:is="currentTabComp ...

  8. Vue动态组件&异步组件

    在动态组件上使用keep-alive 我们之前曾经在一个多标签的界面中使用is特性来切换不同的组件: Vue.js的动态组件模板 <component v-bind:is="curre ...

  9. Vue - 动态组件 & 异步组件

    动态组件 <div id="app"> <components :is="com[2]"></components> < ...

随机推荐

  1. PAT 1044 火星数字

    https://pintia.cn/problem-sets/994805260223102976/problems/994805279328157696 火星人是以13进制计数的: 地球人的0被火星 ...

  2. ecshop ueditor实现百度编辑器

    ecshop后台编辑器替换成ueditor编辑器 投稿:hebedich 字体:[增加 减小] 类型:转载   这篇文章主要介绍了ecshop后台编辑器替换成ueditor编辑器的详细过程,这里推荐给 ...

  3. Linux命令(二十三) 磁盘管理命令(一) df,du,tune2fs

    一. 查看磁盘占用空间情况 df df 命令用于查看硬盘空间的使用情况,还可以查看硬盘分区的类型或 inode 节点的使用情况等. df 命令常用参数如下: -a 显示所有文件系统的磁盘使用情况,包括 ...

  4. 转帖 IBM要推POWER9,来了解一下POWER处理器的前世今生

    https://blog.csdn.net/kwame211/article/details/76669555 先来说一下最新的POWER 9 在Hot Chips会议上首次提到的IBM Power ...

  5. RDM 使用与破解

    RDM 的下载地址 https://cdn.devolutions.net/download/Setup.RemoteDesktopManager.13.6.2.0.msi#_ga=2.2471513 ...

  6. Java多线程1:进程和线程的区别

    之前看了2天的多线程,就不看了.现在继续拾起来吧.最近有点松散,多线程内容都是看毕向东的视频以及网络教程和各种书籍 什么是进程? 通俗一点讲,就是正在进行的程序,进程是操作系统控制的基本运行单元: 如 ...

  7. 一本通1648【例 1】「NOIP2011」计算系数

    1648: [例 1]「NOIP2011」计算系数 时间限制: 1000 ms         内存限制: 524288 KB [题目描述] 给定一个多项式 (ax+by)k ,请求出多项式展开后 x ...

  8. Codeforces Round #530 Div. 1 自闭记

    A:显然应该让未确定的大小尽量大.不知道写了啥就wa了一发. #include<iostream> #include<cstdio> #include<cmath> ...

  9. BZOJ 2242 [SDOI2011]计算器 | BSGS

    insert的时候忘了取模了-- #include <cstdio> #include <cmath> #include <cstring> #include &l ...

  10. Spring Boot整合MyBatis(使用Spring Tool Suite工具)

    1. 创建Spring Boot项目 通过Spring Tool Suite的Spring Starter Project对话框,其实是把项目生成的工作委托http://start.spring.io ...