Компонент ошибки не определен при использовании дочернего тега в экземпляре vue
Я только начал изучать vuejs и попытался запустить небольшой код, применив то, что я узнал, создав базовый компонент внутри экземпляра vue с помощью Vue.component('nameOfComponent', { });, но ничего не отображается, и я получил Uncaught ReferenceError: HelloWorld не определен
В чем ошибка в следующем коде?
<html>
<head>
<head>
<body>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id = "app">
<HelloWorld @updated = "fct" :numb = "firstNumb"/>
</div>
<script type = "text/javascript">
Vue.component('HelloWorld', {
template:'<h1 @click = "mymeth">{{" click to increase !}}{{ numb }}</h1>',
props: {
numb: Number
},
methods:{
mymeth(){
this.$emit('updated', this.numb+1);
console.info("value firstNumb in child component ", this.numb)
},
}
});
new Vue({
'el':'#app',
data:{
firstNumb:5,
},
components: { HelloWorld },
methods:{
fct(e){
this.firstNumb=e;
console.info("value firstNumb in parent component ", this.firstNumb)
},
}
});
</script>
</body>
</html>
Ответы 1
Сразу следует отметить, что Vue 2 достиг EOL (конца срока службы), и вам, если что, следует изучать Vue 3. В любом случае, на ваш вопрос...
Компоненту необходимо назначить переменную, чтобы на него можно было правильно ссылаться внутри new Vue()
const HelloWorld = Vue.component(...)
new Vue({
...
components: { HelloWorld },
...
})
Также при добавлении пользовательских элементов непосредственно в DOM вы должны использовать kebab-case, как указано в документации Vue 2:
только имена кебаб-кебаба действительны непосредственно в DOM
<div id = "app">
<hello-world @updated = "fct" :numb = "firstNumb"/>
</div>
После исправления нескольких других мелких ошибок/опечаток рабочий код представлен ниже:
<html>
<head>
<head>
<body>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id = "app">
<hello-world @updated = "fct" :numb = "firstNumb"/>
</div>
<script>
const HelloWorld = Vue.component('HelloWorld',{
template:'<h1 @click = "mymeth">click to increase ! {{ numb }}</h1>',
props: {
numb: Number
},
methods:{
mymeth(){
this.$emit('updated', this.numb+1);
console.info("value firstNumb in child component ", this.numb)
},
}
});
new Vue({
el : '#app',
data() {
return {
firstNumb: 5
}
},
components: { HelloWorld },
methods:{
fct(e){
this.firstNumb=e;
console.info("value firstNumb in parent component ", this.firstNumb)
},
}
});
</script>
</body>
</html>под «добавлением пользовательских элементов непосредственно в DOM» вы имеете в виду создание компонента с помощью Vue.component, верно? еще для этой заметки «Компоненту необходимо назначить переменную, чтобы на него правильно ссылались в новом Vue()» в некоторых уроках на YouTube Vue.component(...) использовалось так же, как и я, интересно, как это сработало для них
да, см. комментарий Эстуса. Я не так часто использую Vue без этапа сборки, поэтому не знал о том, что он зарегистрирован во всем мире. Возможно, в данном случае понадобилась только коррекция шашлыка.
хорошо, но почему значение дочернего элемента отображает значение меньше 1 по сравнению с родительским? (exp: значение firstNumb в родительском компоненте 6 VS значение firstNumb в дочернем компоненте 5) предполагается, что дочернему компоненту также 6 после отправки this.numb+1 и обновления в родительском компоненте, я ошибаюсь?
журналы консоли показывают значение только в определенный момент времени. после отправки вы сразу же регистрируете консоль. Требуется немного больше времени, чтобы захватить событие в родительском элементе, установить новое значение, а затем обновить свойство обратно в дочернем элементе. тот факт, что пользовательский интерфейс показывает 6, который отображается в дочернем элементе, мы знаем, что значение свойства на самом деле обновляется.
так как это занимает немного больше времени, я думаю, если я settimeout до завершения обновления, я получу хороший дисплей?
это не проблема вашего приложения, проблема в том, как вы пытаетесь его отладить. не рекомендуется добавлять тайм-ауты в ваш код только для целей регистрации. лучше отлаживать реактивные переменные, проверяя их значения в шаблоне (который у вас уже есть), используя что-то вроде наблюдателя , который может регистрировать момент обнаружения изменения значения, или используя более продвинутые инструменты отладки, такие как ️ 🔁 vue devtools
components: { HelloWorld }не нужен, потому что Vue.comComponent регистрирует HelloWorld глобально, это либо тот, либо другой