vm.$data
類型:Object【對象】
詳細:Vue 實例觀察的數(shù)據(jù)對象。Vue 實例代理了對其 data 對象屬性的訪問辐赞。
參考:選項 / 數(shù)據(jù) - data
vm.$props
類型:Object【對象】
詳細:當前組件接收到的 props 對象。Vue 實例代理了對其 props 對象屬性的訪問。
vm.$el
類型:HTMLElement 【DOM】
只讀
詳細:Vue 實例使用的根 DOM 元素。
vm.$options
類型:Object 【對象】
只讀
詳細:用于當前 Vue 實例的初始化選項稚配。需要在vue實例中包含自定義屬性時會有用處:
new Vue({
customOption: 'foo',
created: function () {
console.log(this.$options.customOption) // => 'foo'
}
})
vm.$parent
類型:Vue instance 【vue實例】
只讀
詳細:父實例,如果當前實例有的話港华。
vm.$root
類型:Vue instance【vue實例】
只讀
詳細:當前組件樹的根 Vue 實例药有。如果當前實例沒有父實例,此實例將會是其自己。
vm.$children
類型:Array<Vue instance> 【vue實例】
只讀
詳細:當前實例的直接子組件愤惰。需要注意$children 并不保證順序,也不是響應(yīng)式的赘理。如果你發(fā)現(xiàn)自己正在嘗試使用 $children 來進行數(shù)據(jù)綁定宦言,考慮使用一個數(shù)組配合 v-for 來生成子組件,并且使用 Array 作為真正的來源商模。
vm.$slots
類型:{ [name: string]: ?Array<VNode> }
只讀
詳細:用來訪問被插槽分發(fā)的內(nèi)容奠旺。每個具名插槽 有其相應(yīng)的屬性 (例如:slot="foo" 中的內(nèi)容將會在 vm.$slots.foo 中被找到)。default 屬性包括了所有沒有被包含在具名插槽中的節(jié)點施流。
在使用渲染函數(shù)書寫一個組件時响疚,訪問 vm.$slots 最有幫助。
示例:
<blog-post>
<h1 slot="header">
About Me
</h1>
<p>Here's some page content, which will be included in vm.$slots.default, because it's not inside a named slot.</p>
<p slot="footer">
Copyright 2016 Evan You
</p>
<p>If I have some content down here, it will also be included in vm.$slots.default.</p>.
</blog-post>
<script>
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)
])
}
</script>
})
參考:
- <slot> 組件
- 使用插槽分發(fā)內(nèi)容
- 渲染函數(shù) - 插槽
vm.$scopedSlots
2.1.0 新增類型:{ [name: string]: props => VNode | Array<VNode> }
只讀
詳細:用來訪問作用域插槽瞪醋。對于包括 默認 slot 在內(nèi)的每一個插槽忿晕,該對象都包含一個返回相應(yīng) VNode 的函數(shù)。
vm.$scopedSlots 在使用渲染函數(shù)開發(fā)一個組件時特別有用银受。
參考:
- <slot> 組件
- 作用域插槽
- 渲染函數(shù) - 插槽
vm.$refs
類型:Object 【對象】
只讀
詳細:一個對象践盼,持有注冊過 ref 特性 的所有 DOM 元素和組件實例。
參考:
- 子組件引用
- 特殊特性 - ref
vm.$isServer
類型:boolean
只讀
詳細:當前 Vue 實例是否運行于服務(wù)器宾巍。
參考:服務(wù)端渲染
vm.$attrs
類型:{ [key: string]: string }
只讀
詳細:包含了父作用域中不作為 prop 被識別 (且獲取) 的特性綁定 (class 和 style 除外)咕幻。當一個組件沒有聲明任何 prop 時,這里會包含所有父作用域的綁定 (class 和 style 除外)顶霞,并且可以通過 v-bind="$attrs" 傳入內(nèi)部組件——在創(chuàng)建高級別的組件時非常有用肄程。
vm.$listeners
類型:{ [key: string]: Function | Array<Function> }
只讀
詳細:包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器。它可以通過 v-on="$listeners" 傳入內(nèi)部組件——在創(chuàng)建更高層次的組件時非常有用选浑。
實例方法 / 數(shù)據(jù)
vm.$watch( expOrFn, callback, [options] )
參數(shù):
- {string | Function} expOrFn
- {Function | Object} callback
- {Object} [options]
- {boolean} deep
- {boolean} immediate
返回值:{Function} unwatch
用法:
觀察 Vue 實例變化的一個表達式或計算屬性函數(shù)蓝厌。回調(diào)函數(shù)得到的參數(shù)為新值和舊值鲜侥。表達式只接受監(jiān)督的鍵路徑褂始。對于更復(fù)雜的表達式,用一個函數(shù)取代描函。
注意:在變異 (不是替換) 對象或數(shù)組時崎苗,舊值將與新值相同,因為它們的引用指向同一個對象/數(shù)組舀寓。Vue 不會保留變異之前值的副本胆数。
示例:
// 鍵路徑
vm.$watch('a.b.c', function (newVal, oldVal) {
// 做點什么
})
// 函數(shù)
vm.$watch(
function () {
return this.a + this.b
},
function (newVal, oldVal) {
// 做點什么
}
)
//vm.$watch 返回一個取消觀察函數(shù),用來停止觸發(fā)回調(diào):
var unwatch = vm.$watch('a', cb)
// 之后取消觀察
unwatch()
選項:deep
為了發(fā)現(xiàn)對象內(nèi)部值的變化互墓,可以在選項參數(shù)中指定 deep: true 必尼。注意監(jiān)聽數(shù)組的變動不需要這么做。
vm.$watch('someObject', callback, {
deep: true
})
vm.someObject.nestedValue = 123
// callback is fired
選項:immediate
在選項參數(shù)中指定 immediate: true 將立即以表達式的當前值觸發(fā)回調(diào):
vm.$watch('a', callback, {
immediate: true
})
// 立即以 a的當前值觸發(fā)回調(diào)
vm.$set( target, key, value )
參數(shù):
- {Object | Array} target
- {string | number} key
- {any} value
返回值:設(shè)置的值。
用法:
這是全局 Vue.set 的別名判莉。
參考:Vue.set
vm.$delete( target, key )
參數(shù):
- {Object | Array} target
- {string | number} key
用法:
這是全局 Vue.delete 的別名豆挽。
參考:Vue.delete