首頁猿問在 Vue.js 3...

在 Vue.js 3 setup() 中訪問 this.$root

JavaScript

忽然笑 2023-03-24 16:24:50

在 Vue 2 中，您可以在鉤子this.$root內部訪問created。在 Vue 3 中，所有本應進入created鉤子的東西現在都進入了setup()。在setup()我們無權訪問的this情況下，我們如何訪問根實例上的任何內容？比如說，我在根實例上設置了一個屬性：const app = createApp(App).mount('#app'); app.$appName = 'Vue3';我可以this從mounted()with訪問this.$root.$appName，我該怎么做setup()？更新我可以訪問它import：import app from '@/main'; ...setup() { console.log(app.$appName) // Vue3但是，如果我必須對每個文件都這樣做，這會很麻煩。更新 2provide()另一種解決方法是在內部使用App.vue，然后inject()在任何其他組件中使用：setup() { provide('$appName', 'Vue3')setup() { inject('$appName') // Vue3

查看完整描述

4 回答

繁星coding

TA貢獻1797條經驗獲得超4個贊

您可以在 vue 3 中定義全局屬性：

app.config.globalProperties.appName= 'vue3'

使用setup(composition api) 您可以使用getcurrentinstance來訪問該屬性：

import { getCurrentInstance } from 'vue'

...

setup() {

const app= getCurrentInstance()

console.log(app.appContext.config.globalProperties.appName)

由于您仍然可以使用選項 api，您可以簡單地執行以下操作：

mounted(){

console.log(this.appName)

}

反對回復 2023-03-24

揚帆大魚

TA貢獻1799條經驗獲得超9個贊

看來你需要provide / inject。在你的App.vue：

import { provide } from 'vue';

export default {

setup() {

provide('appName', 'vue3')

}

或者provide它與你的app：

const app = createApp(App);

app.mount('#app');

app.provide('appName', 'Vue3');

然后在您想要訪問此變量的任何子組件中，inject它：

import { inject } from 'vue'

export default {

setup() {

const appName = inject('appName');

}

反對回復 2023-03-24

HUH函數

TA貢獻1836條經驗獲得超4個贊

如果您只想用（字符串）替換{{ appName }}任何模板'Vue 3'，而不必導入任何東西，最干凈的方法是使用config.globalProperties，正如其他答案所建議的那樣：

const app = createApp(App).mount('#app');

app.config.globalProperties.appName = 'Vue 3'

但是，您應該盡量不要過度使用此模式。它違背了推動 Composition API 開發的可重用性和模塊化原則。

你應該避免污染的主要原因globalProperties是因為它在 Vue3 應用程序中充當污染場，所以許多插件開發者可能決定使用它來提供他們的插件實例。（顯然，沒有人會命名一個插件appName，所以在這種特殊情況下你沒有風險）。

推薦的全球化替代方法是導出函數useStuff()。

在你的情況下：

export function useAppName () { return 'Vue 3' }

// or even:

export const useAppName = () => 'Vue 3'

在任何組件中：

import { useAppName } from '@/path/to/function'

setup () {

const appName = useAppName()

return {

appName // make it available in template and hooks

}

優點：

它使用 Composition API 命名約定
當共享比原語更復雜的東西時（可以是一個模塊、一組函數、一個服務等），所有類型都是開箱即用的。這在setup()函數中特別有用。
您只stuff在需要公開的地方公開和確定范圍，而不是在應用程序的每個組件中。另一個優點是：如果你只是在setup()功能上需要它，你不必將它暴露給模板或鉤子。

使用隨機（但真實）插件的示例用法：
創建插件文件（即 /plugins/gsap.ts：）：

import gsap from 'gsap'

import ScrollToPlugin from 'gsap/ScrollToPlugin'

// configure the plugin globally

gsap.registerPlugin(ScrollToPlugin)

export function useGsap () {

return gsap

}

在任何組件中：

import { defineComponent } from 'vue'

import { useGsap } from '@/plugins/gsap'

export defineComponent({

setup () {

const gsap = useGsap()

// gsap here is typed correctly (if the plugin has typings)

// no need for casting

return {

gsap // optionally provide it to hooks and template

} // if needed outside setup()

}

})

反對回復 2023-03-24

qq_笑_17

TA貢獻1818條經驗獲得超7個贊

對于想知道如何簡單地訪問thisinside的任何人setup()，一種方法是this在掛鉤中設置一個記憶變量created()并使用nextTick()它來訪問它：

const app = createApp(App);

app.config.globalProperties.$appName = 'Hello!';

import { nextTick } from 'vue';

let self;

export default {

name: 'HelloWorld',

setup() {

nextTick(() => console.log(self.$appName)); // 'Hello!'

created() {

self = this;

};

</script>

反對回復 2023-03-24

4 回答
0 關注
756 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

在 Vue.js 3 setup() 中訪問 this.$root

在 Vue.js 3 setup() 中訪問 this.$root

4 回答

添加回答