Руководство для начинающих по работе с компонентами в Vue

Одна из замечательных особенностей работы с Vue — это компонентный подход к созданию пользовательских интерфейсов. Это позволяет вам разбивать ваше приложение на более мелкие, многократно используемые части (компоненты), которые затем можно использовать для построения более сложной структуры.

В этом руководстве я предложу вам общее представление о работе с компонентами в Vue. Я посмотрю, как создавать компоненты, как передавать данные между компонентами (как через реквизиты, так и через шину событий) и как использовать элемент <slot> в Vue для рендеринга дополнительного контента внутри компонента.

Каждый пример будет сопровождаться работающей демонстрацией CodePen.

Как создать компоненты в Vue

Компоненты — это, по сути, многократно используемые экземпляры Vue с именем. Существуют различные способы создания компонентов в приложении Vue. Например, в малом и среднем проекте вы можете использовать метод Vue.component для регистрации глобального компонента, например:

 Vue.component('my-counter', { data() { return { count: 0 } }, template: `<div>{{ count }}</div>` }) new Vue({ el: '#app' }) 

Название компонента — my-counter . Это можно использовать так:

 <div id="app"> <my-counter></my-counter> </div> 

При именовании вашего компонента вы можете выбрать регистр кебаба ( my-custom-component ) или регистр Pascal ( MyCustomComponent ). Вы можете использовать любой вариант, когда ссылаетесь на свой компонент из шаблона, но при ссылке на него непосредственно в DOM (как в примере выше) допустимо только имя тега case kebab.

Вы также можете заметить, что в приведенном выше примере data — это функция, которая возвращает литерал объекта (в отличие от самого литерала объекта). Это связано с тем, что каждый экземпляр компонента получает свой собственный объект data и не должен совместно использовать один глобальный экземпляр со всеми другими экземплярами.

Есть несколько способов определить шаблон компонента. Выше мы использовали шаблонный литерал, но мы также могли бы использовать <script tag> помеченный text/x-template или text/x-template в DOM. Вы можете прочитать больше о различных способах определения шаблонов здесь .

Хотите узнать Vue.js с нуля? Эта статья является выдержкой из нашей Премиум библиотеки. Получите полную коллекцию книг Vue, охватывающих основы, проекты, советы и инструменты и многое другое с SitePoint Premium. Присоединяйтесь сейчас всего за $ 9 / месяц .

Однофайловые компоненты

В более сложных проектах глобальные компоненты могут быстро стать громоздкими. В таких случаях имеет смысл разработать приложение для использования однофайловых компонентов. Как следует из названия, это отдельные файлы с расширением .vue , которые содержат .vue <template> , <script> и <style> .

В нашем примере выше компонент App может выглядеть так:

 <template> <div id="app"> <my-counter></my-counter> </div> </template> <script> import myCounter from './components/myCounter.vue' export default { name: 'app', components: { myCounter } } </script> <style></style> 

И компонент MyCounter может выглядеть так:

 <template> <div>{{ count }}</div> </template> <script> export default { name: 'my-counter', data() { return { count: 0 } } } </script> <style></style> 

Как вы можете видеть, при использовании однофайловых компонентов их можно импортировать и использовать непосредственно в тех компонентах, где они необходимы.

В этом руководстве я представлю все примеры с использованием метода регистрации компонента Vue.component() .

 <BlogPost> <AuthorDetails></AuthorDetails> <PostDetails></PostDetails> <Comments></Comments> </BlogPost> 

 new Vue({ el: '#app', data() { return { author: { name: 'John Doe', email: '[email protected]' } } } }) 

 <div id="app"> <author-detail :owner="author"></author-detail> </div> 

 Vue.component('author-detail', { template: ` <div> <h2>{{ owner.name }}</h2> <p>{{ owner.email }}</p> </div> ´, props: ['owner'] }) 

 Vue.component('author-detail', { template: ` <div> <h2>{{ owner.name }}</h2> <p>{{ owner.email }}</p> </div> `, props: { owner: { type: Object, required: true } } }) 

 "[Vue warn]: Invalid prop: type check failed for prop 'text'. Expected Boolean, got String. (found in component <>)" 

 new Vue({ el: '#app', data() { return { count: 0 } }, methods: { increment() { this.count++ } } }) 

 <div id="app"> {{ count }} <div> <button @click="increment">+</button> </div> </div> 

 new Vue({ el: '#app', data() { return { count: 0 } } 

 Vue.component('counter', { template: ` <div> <button @click="increment">+</button> </div> `, props: { value: { type: Number, required: true } }, methods: { increment() { this.count++ } } }) 

 <div id="app"> <h3> {{ count }} </h3> <counter :count="count" /> </div> 

 const eventBus = new Vue(); 

 Vue.component('counter', { props: { count: { type: Number, required: true } }, methods: { increment() { this.count++ eventBus.$emit('count-incremented', this.count) } }, template: ` <div> <button @click="increment">+</button> </div> ` }) 

 new Vue({ el: '#app', data() { return { count: 0 } }, created() { eventBus.$on('count-incremented', (count) => { this.count = count }) } }) 

 <div id="app"> <author-detail :owner="author"> <p>This will be replaced</p> </author-detail> </div> 

 Vue.component('list', { template: '#list' }) new Vue({ el: "#app" }) 

 <div id="app"> <h2>Slots</h2> <list> <h4>I am the first slot</h4> </list> <list> <h4>I am the second slot</h4> </list> </div> <script type="text/x-template" id="list"> <div> <h3>Child Component</h3> <slot></slot> </div> </script> 

 <div id="app"> <h2>Slots</h2> <list> <h4>I am the first slot</h4> </list> <list></list> </div> <script type="text/x-template" id="list"> <div> <h3>Child Component</h3> <slot>This is fallback content</slot> </div> </script>