Vue3: как получить доступ к переменным в <script setup> из экспорта по умолчанию
Когда я делаю миграцию проекта с vue2 на vue3, в сегменте настройки сценария vue3 есть переменная, но мне нужно получить к ней доступ в методе в части экспорта по умолчанию, которая относится к проекту vue2. Если я получу к нему доступ напрямую, он выдаст ошибку, которая означает «не определено» или «не определено».
<template>
<button @click = "btnClick">{{layout}}</button> //{{layout}} works fine
</template>
<script setup>
import { ref } from 'vue'
const layout = ref("someting")
defineOptions({
name: 'App'
});
</script>
<script>
export default {
name: 'MyApp',
methods: {
btnClick: function(e){
console.info(layout) //an error will be thrown
}
}
}
</script>
Подробная информация об ошибке приведена ниже:
Uncaught ReferenceError: layout is not defined
btnClick App.vue:19
0 App.vue:2
callWithErrorHandling runtime-core.esm-bundler.js:195
callWithAsyncErrorHandling runtime-core.esm-bundler.js:202
invoker runtime-dom.esm-bundler.js:693
addEventListener runtime-dom.esm-bundler.js:644
patchEvent runtime-dom.esm-bundler.js:662
patchProp runtime-dom.esm-bundler.js:739
mountElement runtime-core.esm-bundler.js:4641
Ответы 3
Если вы хотите получить к нему доступ в методе в части экспорта по умолчанию, объявите переменную в setup().
<template>
<button @click = "btnClick">{{ layout }}</button>
</template>
<script>
import { ref } from 'vue';
export default {
name: 'MyApp',
setup() {
const layout = ref('something');
const btnClick = () => {
console.info(layout.value);
};
// return variables and methods to make them available on the component instance
return {
layout,
btnClick
};
}
};
</script>
vue3 Composition API: setup() Документ https://vuejs.org/api/composition-api-setup.html
Если вам сложно удалить функцию из части методов, вы можете поместить переменную внутри data(){} и получить к ней доступ в методе с помощью this. <script> export default { name: 'MyApp', data() { return { layout: 'something' }; }, methods: { btnClick: function (e) { console.info(this.layout); } } }; </script>
Если вы хотите использовать vue2 и vue3 вместе, вам следует создать только один скрипт и переместить содержимое настройки скрипта в функцию настройки.
<template>
<button @click = "btnClick">{{layout}}</button>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const layout = ref("someting")
return {
layout
}
},
name: 'MyApp',
methods: {
btnClick: function(e) {
console.info(this.layout)
}
}
}
</script>Это работает, <script setup> следует полностью переместить в setup() в настройках экспорта по умолчанию, иначе это создаст много проблем. Vue3 — это действительно новая возможность, когда возникает задача миграции из vue2. Спасибо
если вы хотите перейти с vue2 на vue3, вы можете написать это в настройке скрипта
<template>
<button @click = "btnClick">{{layout}}</button>
</template>
<script setup>
import { ref } from 'vue'
const layout = ref("someting")
function btnClick(){
console.info(layout.value);
}
</script>
привет, у меня слишком много методов, таких как событие щелчка, в файле слишком большого количества компонентов из проекта vue2. Должен ли я удалить сегмент методов и переместить их в setup()? Это потребует от нас огромной работы. Казалось, что я не могу сохранить событие щелчка кнопки мыши в части метода, если хочу получить доступ к переменной «макет». Спасибо