实例变量/方法
$data
组件实例正在侦听的数据对象。组件实例代理了对其data对象property的访问。
以_或$开头的property不会被Vue实例代理,因为它们可能和Vue内置的property、API方法冲突
$props
当前组件接收到的 props 对象。组件实例代理了对其props对象property的访问。
只读代理
$options
用于当前组件实例的配置选项,包括自定义的配置项也能访问
const app = Vue.createApp({
customOption: 'foo',
created() {
console.log(this.$options.customOption) // => 'foo'
}
})
$parent
父组件实例,在子组件中修改会影响父组件
可以this.$parent.$parent链式调用取父组件之上的组件
(1)获取父组件的方法/计算属性
this.$parent.方法名();
this.$parent.计算属性; 计算属性只会执行一次
(2)获取父组件data的属性
this.$parent.属性名;
$root
获取最外层根组件(main.js内的组件),如果当前实例没有父实例,此实例将会是其自己。
用法和$parent一样
$el
获取当前组件中的根元素dom(包括其子元素)
$children
获取当前组件的子组件,子组件会被放进数组里
获取子组件的下标后,操作和$parent一样
并不保证子组件顺序,也不是响应式的
$slots
获取插槽的内容,会是类似虚拟节点的结构
<组件>
<template v-slot:foo>
具名内容
</template>
啊哈哈
</组件>
具名插槽:this.$slots.foo() v3版本
默认插槽:this.$slots.default()
渲染函数中应用,v2.5版本
<blog-post>
<template v-slot:header>
<h1>About Me</h1>
</template>
<p>Here's some page content, which will be included in vm.$slots.default, because it's not inside a named slot.</p>
<template v-slot:footer>
<p>Copyright 2016 Evan You</p>
</template>
<p>If I have some content down here, it will also be included in vm.$slots.default.</p>.
</blog-post>
Vue.component('blog-post', {
render: function (createElement) {
var header = this.$slots.header
var body = this.$slots.default
var footer = this.$slots.footer
return createElement('div', [
createElement('header', header),
createElement('main', body),
createElement('footer', footer)
])
}
})
$scopedSlots
作用域插槽,包括默认slot在内的每一个插槽,该对象都包含一个返回相应VNode的函数。
所有的$slots现在都会作为函数暴露在$scopedSlots中,如果你在使用渲染函数,不论当前插槽是否带有作用域,我们都推荐始终通过$scopedSlots访问它们,这不仅仅使得在未来添加作用域变得简单,也可以让你最终轻松迁移到所有插槽都是函数的Vue 3。
$refs
一个对象,持有注册过ref的所有DOM元素和组件实例。
$attrs
获取传递给组件的未在props中注册的属性和未在emits中注册的函数
2.5不包括style和class
3.0包括style和class
注册:
export default {
props:[...],
emits:[...]
}
$forceUpdate
this.$forceUpdate()
迫使组件实例重新渲染,注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件
$listeners
是一个对象,里面包含了作用在这个组件上的(不含.native修饰器的)所有监听器。例如:
{
focus: function (event) { /* ... */ }
input: function (value) { /* ... */ },
}
它可以通过v-on="$listeners"传入内部组件
$isServer
当前Vue实例是否运行于服务器。
$emit('test','hi')
$on('test',fn)
$once('test',fn) 只监听一次,监听器就会被移除
$off(['test',fn]) 移除自定义事件监听器
如果没有提供参数,则移除所有的事件监听器;
如果只提供了事件,则移除该事件所有的监听器;
如果同时提供了事件与回调,则只移除这个回调的监听器。
$destroy()
完全销毁一个实例,清理它与其它实例的连接,解绑它的全部指令及事件监听器。
触发beforeDestroy和destroyed的钩子。
Vue.全局属性/方法:
取消所有的日志与警告。
Vue.config.silent = true
忽略在Vue之外的自定义元素(使用了 Web Components APIs),否则会假设你忘记注册全局组件或者拼错了组件名称,从而抛出一个关于 Unknown custom element 的警告。
Vue.config.ignoredElements = [
'my-custom-web-component',
'another-web-component',
/^ion-/ 可以使用正则
]
自定义键盘码对应键盘名
Vue.config.keyCodes = {
v: 86,
f1: 112,
"media-play-pause": 179, 只能用驼峰命名
up: [38, 87]
}
<input type="text" @keyup.media-play-pause="method">
在启动时生成生产提示。
Vue.config.productionTip
删除属性触发响应变化
Vue.delete(target, propertyName/index)
将一个模板字符串编译成render函数
var res = Vue.compile('<div><span>{{ msg }}</span></div>')
new Vue({
data: {
msg: 'hello'
},
render: res.render,
staticRenderFns: res.staticRenderFns
})
让一个对象可响应
Vue.observable( object )
返回Vue的版本号
Vue.version
prototype
将属性/方法绑定到Vue原型上,
每一个vue组件都是Vue的实例,所以组件内this可以拿到Vue.prototype上添加的属性和方法。
Vue.prototype.$xx=xxx来绑定,首字母$避免命名冲突
组件上通过this获取到实例对象,this.$xx调用
vue $实例变量/方法、Vue.全局属性/方法、原型prototype来组件之间获取数据
于 2020-02-27 16:05:05 首次发布