七、vue语法补充二(动态组件 & 异步组件、访问元素 & 组件、混入)
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语法补充二(动态组件 & 异步组件、访问元素 & 组件、混入)的更多相关文章
- Vue父子组件传值之——访问根组件$root、$parent、$children和$refs
Vue组件传值除了prop和$emit,我们还可以直接获取组件对象: 根组件: $root // 单一对象 表示当前组件树的根 Vue 实例,即new Vue({...根组件内容}).如果当前实例没有 ...
- 四、vue语法补充
1.自定义过滤器 格式: {{ msg | filters}} 2.computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter <!DOCTYPE html> ...
- vue语法概要二
函数 用途 类别 v-html 用于输出html格式的数据 输出 v-bing 用于输出值 输出 v-model 双向绑定 输入和输出 v-if 逻辑判断 分支语句 v-else 同上 分支语句 v- ...
- vuex+Es6语法补充-Promise
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,采用 集中式存储管理 单页面的状态管理/多页面状态管理 使用步骤: // 1.导入 import Vuex from 'vuex' // ...
- vue语法精简(方便开发查阅)
vue语法精简(方便开发查阅) 指令 特殊的标签和属性 变异方法 事件修饰符 按键修饰符 表单修饰符 生命周期函数 计算属性 监听属性 子组件通过事件向父组件传递信息 在组件上使用v-model 动画 ...
- vue教程3-05 vue组件数据传递、父子组件数据获取,slot,router路由
vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...
- vue深入了解组件——动态组件&异步组件
一.在动态组件上使用 keep-alive 我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件: <component v-bind:is="currentTabComp ...
- Vue动态组件&异步组件
在动态组件上使用keep-alive 我们之前曾经在一个多标签的界面中使用is特性来切换不同的组件: Vue.js的动态组件模板 <component v-bind:is="curre ...
- Vue - 动态组件 & 异步组件
动态组件 <div id="app"> <components :is="com[2]"></components> < ...
随机推荐
- PAT 1044 火星数字
https://pintia.cn/problem-sets/994805260223102976/problems/994805279328157696 火星人是以13进制计数的: 地球人的0被火星 ...
- ecshop ueditor实现百度编辑器
ecshop后台编辑器替换成ueditor编辑器 投稿:hebedich 字体:[增加 减小] 类型:转载 这篇文章主要介绍了ecshop后台编辑器替换成ueditor编辑器的详细过程,这里推荐给 ...
- Linux命令(二十三) 磁盘管理命令(一) df,du,tune2fs
一. 查看磁盘占用空间情况 df df 命令用于查看硬盘空间的使用情况,还可以查看硬盘分区的类型或 inode 节点的使用情况等. df 命令常用参数如下: -a 显示所有文件系统的磁盘使用情况,包括 ...
- 转帖 IBM要推POWER9,来了解一下POWER处理器的前世今生
https://blog.csdn.net/kwame211/article/details/76669555 先来说一下最新的POWER 9 在Hot Chips会议上首次提到的IBM Power ...
- RDM 使用与破解
RDM 的下载地址 https://cdn.devolutions.net/download/Setup.RemoteDesktopManager.13.6.2.0.msi#_ga=2.2471513 ...
- Java多线程1:进程和线程的区别
之前看了2天的多线程,就不看了.现在继续拾起来吧.最近有点松散,多线程内容都是看毕向东的视频以及网络教程和各种书籍 什么是进程? 通俗一点讲,就是正在进行的程序,进程是操作系统控制的基本运行单元: 如 ...
- 一本通1648【例 1】「NOIP2011」计算系数
1648: [例 1]「NOIP2011」计算系数 时间限制: 1000 ms 内存限制: 524288 KB [题目描述] 给定一个多项式 (ax+by)k ,请求出多项式展开后 x ...
- Codeforces Round #530 Div. 1 自闭记
A:显然应该让未确定的大小尽量大.不知道写了啥就wa了一发. #include<iostream> #include<cstdio> #include<cmath> ...
- BZOJ 2242 [SDOI2011]计算器 | BSGS
insert的时候忘了取模了-- #include <cstdio> #include <cmath> #include <cstring> #include &l ...
- Spring Boot整合MyBatis(使用Spring Tool Suite工具)
1. 创建Spring Boot项目 通过Spring Tool Suite的Spring Starter Project对话框,其实是把项目生成的工作委托http://start.spring.io ...