在Vue中,當我們需要全局使用的原型變量時,我們可以使用Vue.prototype來定義。這些變量可以被所有組件調用和修改。
Vue.prototype.$myVar = "hello world"; new Vue({ mounted() { console.log(this.$myVar) // "hello world" } })
上面的代碼中,我們定義了一個名為$myVar的原型變量,并將其值設為"hello world"。然后,在一個Vue實例中使用mounted鉤子函數來輸出該變量的值。
需要注意的是,在使用原型變量時,建議使用$作為前綴。這樣可以避免與組件中的變量命名沖突。
除了基本類型的變量,我們還可以在原型上定義函數和對象。
Vue.prototype.$myFunc = function() { console.log("my function"); } Vue.prototype.$myObj = { name: "John", age: 30 } new Vue({ mounted() { this.$myFunc(); // "my function" console.log(this.$myObj.name) // "John" } })
上面的代碼中,我們在原型上定義了一個名為$myFunc的函數和一個名為$myObj的對象。然后,在Vue實例中使用mounted鉤子函數來調用該函數和輸出對象的屬性值。
需要注意的是,在修改對象的屬性時,需要使用Vue.set方法來觸發組件更新。
Vue.prototype.$myObj = { name: "John", age: 30 } new Vue({ mounted() { Vue.set(this.$myObj, 'age', 40); console.log(this.$myObj.age) // "40" } })
上面的代碼中,我們在原型上定義了一個名為$myObj的對象。然后,在Vue實例中使用mounted鉤子函數來調用Vue.set方法來修改對象的屬性值。
總結來說,Vue.prototype是一個很方便的全局變量定義方式,可以實現多個組件之間共享數據和方法。
上一篇el表達式遍歷json
下一篇emoji轉json