Осуществимость: составной интерфейс.
- Можно ли создать составной UI (микро-интерфейс) на основе vue с помощью стандартных инструментов vue?
Да, это возможно. Практически любой независимый Vue-компонент, который вы видите опубликованным (vue-select, vue-slider-component и даже полные наборы компонентов, такие как vuetify, bootstrap-vue или vue-material являются примерами многоразовых (компонуемые) компоненты, разработанные с использованием стандартных инструментов Vue.
Переходы страниц: маршрутизация
- У нас более одной страницы, поэтому нам нужно решение для перехода с одной стороны на другую. Как мы можем реализовать переходы между страницами?
Инструмент для этой работы - vue-router. Он разработан основной командой, поэтому ожидайте тесной интеграции и отличной поддержки функций.
Ивент-автобус
- Можно ли установить шину событий между компонентами VueJS?
Каждый экземпляр Vue реализует интерфейс событий. Это означает, что для связи между двумя экземплярами или компонентами Vue вы можете использовать Пользовательские события. Вы также можете использовать Vuex (см. Ниже).
Двунаправленная связь
- Как мы можем реализовать двунаправленную связь между компонентами?
Лучший способ отправить данные от родительского компонента к дочернему - использовать реквизит. Шаги:
- Объявите
props (массив или объект) в дочернем
- Передайте его ребенку через
<child :name="variableOnParent">.
См. Демонстрацию ниже:
Vue.component('child-comp', {
props: ['message'], // declare the props
template: '<p>At child-comp, using props in the template: {{ message }}</p>',
mounted: function () {
console.log('The props are also available in JS:', this.message);
}
})
new Vue({
el: '#app',
data: {
variableAtParent: 'DATA FROM PARENT!'
}
})
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<div id="app">
<p>At Parent: {{ variableAtParent }}</p>
<child-comp :message="variableAtParent"></child-comp>
</div>
Вы также можете получить ссылки для дочерних компонентов ( refs) и вызывать на них методы.
Vue.component('my-comp', {
template: "#my-comp-template",
props: ['name'],
methods: {
saveMyComp() {
console.log('Saved:', this.name);
}
}
})
new Vue({
el: '#app',
data: {
people: [{name: 'Bob'}, {name: 'Nelson'}, {name: 'Zed'}]
},
methods: {
saveChild(index) {
this.$refs.myComps[index].saveMyComp();
}
}
});
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<div id="app">
<div v-for="(person, index) in people">
<button @click="saveChild(index)">saveMyComp</button>
<my-comp :name="person.name" ref="myComps"></my-comp>
</div>
</div>
<template id="my-comp-template">
<span> {{ name }} </span>
</template>
Для связи от дочернего к родительскому вы будете использовать события. См. Демонстрацию ниже. Есть также несколько модификаторов, которые упрощают эту задачу.
var parent = {
template: '<div><child :content.sync="localContent"></child><br>At parent: {{ localContent }}</div>',
props: ['content'],
data() {
return {
localContent: this.content
}
}
};
var child = {
template: '<div>At child: {{ content.value }}<button @click="change">change me</button></div>',
props: ['content'],
methods: {
change() {
this.$emit('update:content', {value: "Value changed !"})
}
}
};
Vue.component('child', child);
Vue.component('parent', parent);
new Vue({
el: '#app'
});
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
<parent :content="{value:'hello parent'}"></parent>
</div>
Vuex
Однако неизбежно по мере роста вашего приложения вам придется использовать более масштабируемый подход. Vuex является де-факто решением в этом случае. Грубо говоря, при использовании Vuex вам не придется передавать состояние от родителя к потомку: все они заберут его из хранилища Vuex (своего рода глобальная реактивная переменная). Это значительно упрощает управление приложением и заслуживает отдельной публикации.
Заключительное примечание. Как видите, одним из огромных преимуществ Vue является то, насколько легко вы можете создавать прототипы и тестировать функциональность. Нет шага сборки, несколько абстракций поверх сырого JS. По сравнению с другими фреймворками, я бы сказал, что это важный бонус.
person
acdcjunior
schedule
10.03.2018
