Автор оригинала: Per Harald Borgen.
В Мой предыдущий учебник Мы узнали основы Vue.js: экземпляра Vue, синтаксис шаблона, объекта данных, директивы, методы и многое другое. Этого было достаточно, чтобы начать создавать с очень основными примерами Vue.
Но если вы хотите создать правильные приложения с Vue, вам нужно узнать о компонентах. Это одна из самых мощных особенностей библиотеки.
Компоненты делают ваш код более многоразовым и разметкой более читабелее.
Они позволят вам создать пользовательские HTML-элементы, которые будут вести себя именно, как вы хотите их. Чтобы создать компонент Vue.js, выполните следующие действия:
Vue.component('my-component', {
template: 'A custom component!'
})
new Vue({
el: '#app'
}) Шаблон ключа Где вы пишете свою разметку для этого компонента. В том же объекте вы позже добавите дополнительные функции. Вы создаете экземпляр вашего компонента через добавление
Это приведет к появлению следующего на странице:
Вот a Scrimba Screencast Объясняя ту же концепцию. Это интерактивный, так что вы можете приостановить скринкасть и редактировать код всякий раз, когда вы хотите.
Реквизит
Компонент выше не делает много. Чтобы сделать его немного более полезным, давайте добавим к нему реквизиты:
Vue.component('my-component', {
props: ['message'],
template: `{{ message }}`,
})Опоры позволят вам передавать данные в экземпляр компонента с внешней стороны этого компонента. Или правильно, пройдите данные от родителя.
мой-компонент Есть один опора называется сообщение , который это вырежет. Значение сообщение Будет определен, когда мы создаем новые экземпляры этого компонента в доме. Мы можем создать столько мой-компонент Как мы хотим, и дайте каждому из них разные реквизиты. Таким образом, мы сможем повторно использовать наш код.
Пройти данные в виде сообщение Проп, просто сделайте следующее:
Теперь Здравствуйте от Vue.js! будет отображаться на странице.
Но это все еще очень статическое решение, поскольку мы жестко закодировали значение опоры в HTML. Лучшее решение будет связывать это значение для источника данных. Тогда мы можем изменить его, как мы хотим позже, например, на основании пользовательских взаимодействий или ответов от API.
Давайте связываемся с объектом данных на нашем экземпляре Vue. Сначала мы создадим объект данных.
var app = new Vue({
el: '#app',
data: {
msg: 'Hello from the Vue instance'
}
})Связать опоры в мой-компонент к Msg В нашем экземпляре Vue мы будем использовать V-bind Директива Мы узнали в предыдущей статье:
Теперь мы можем изменить данные через app.msg И Vue позаботится о обновлении DOM с новыми данными.
Вот a Scrimba Screencast Объясняя концепцию:
Но что, если вы хотите, чтобы ваш компонент сможет изменить его сообщение ? Это не может произойти до тех пор, пока сообщение Является ли опорой, так как вы никогда не должны мутировать опоры внутри компонента. Если вы попытаетесь, Vue даст вам предупреждение в консоли.
Данные
Поэтому нам понадобится другой способ обработки данных внутри компонента. Это где данные Функция входит в игру. Это позволит вашим компонентам обрабатывать внутреннее состояние, которое вы можете изменить, как вы хотите.
Компонент данные Заполняет ту же роль, что и данные объект в экземпляре Vue. Они оба места, где вы будете проводить смежные данные. Но, компонент данные это Функция И не объект Отказ
Давайте прыгнем в код, чтобы сделать его менее абстрактным.
Vue.component('my-component', {
template: ' {{ message }} ',
data: function() {
return {
message: 'Hello from Vue data!'
}
}
})Вот a Scrimba Screencast что объясняет концепцию.
И это об этом! Есть, конечно, еще много вещей, чтобы узнать о составляющих Vue. Но этого должно быть достаточно для вас, чтобы начать играть с ним самостоятельно.
Если вы узнаете что-то новое о VUE, я бы порекомендовал вам пройти это знание другим. Это один из лучших способов выучить, и причина, по которой общины такие как FreeCodecamp процветать.
Так что идите вперед и напишите статью (или создайте Scrimba Screencast) о том, что вы узнали!
Оригинал: “https://www.freecodecamp.org/news/vue-js-components-an-interactive-guide-1b8149ecc254/”