Основные моменты DataSeries:
- Vue.js - это простой в использовании фреймворк для веб-приложений, который мы можем использовать для разработки интерактивных интерфейсных приложений.
В этой статье мы рассмотрим, как получить доступ к различным частям родительского, дочернего или корневого компонента. Также мы смотрим на внедрение зависимостей в Vue.js
Доступ к элементам и компонентам
Иногда нам нужно получить доступ к другим компонентам из данного компонента. Однако делать это часто - плохая идея, так как это быстро становится беспорядочным.
Доступ к корневому экземпляру
Мы можем получить доступ к корневому экземпляру из дочернего компонента с помощью свойства $root.
Например, мы можем получить доступ к свойству foo корневого экземпляра Vue следующим образом:
src/index.js :
Vue.component("foo", {
template: `<p>{{rootFoo}}</p>`,
computed: {
rootFoo() {
return this.$root.foo;
}
}
});
new Vue({
el: "#app",
data: {
foo: "bar"
}
});
index.html :
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<foo></foo>
</div>
<script src="src/index.js"></script>
</body>
</html>
Приведенный выше код создал rootFoo вычисляемое свойство из foo компонента корневого экземпляра Vue и отобразил его внутри компонента foo.
Таким образом, мы получаем foo.
Также могут быть установлены данные, возвращаемые из $root, и могут быть вызваны его методы.
Итак, мы можем написать:
this.$root.foo = 2
or:
this.$root.baz()из любого подкомпонента в дополнение к доступу к значениям свойств.
Доступ к экземпляру родительского компонента
Подобно $root, мы можем получить доступ к свойствам родительского компонента с помощью свойства $parent из дочернего компонента.
Это не следует использовать часто, потому что трудно отследить, когда были установлены родительские данные, поэтому мы должны передавать реквизиты дочернему элементу вместо прямого доступа к свойству $parent.
Например, мы можем использовать это так:
src/index.js :
Vue.component("child", {
template: `<p>{{parentFoo}}</p>`,
computed: {
parentFoo() {
return this.$parent.foo;
}
}
});
Vue.component("parent", {
data() {
return {
foo: "bar"
};
},
template: `
<p><slot></slot></p>
`
});
new Vue({
el: "#app"
});
index.html :
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<parent>
<child></child>
</parent>
</div>
<script src="src/index.js"></script>
</body>
</html>
В приведенном выше коде мы получили доступ к свойству foo компонента parent из компонента child, используя this.$parent в вычисляемом свойстве parentFoo. Итак, на экране отображается bar.
Доступ к экземплярам дочерних компонентов и дочерним элементам
Мы можем получить доступ к дочернему компоненту прямо в JavaScript. Для этого мы можем добавить атрибут ref к дочернему компоненту и присвоить имя в качестве значения.
Затем мы можем использовать this.$refs.name для доступа к компоненту, где name - это имя, которое мы установили.
Например, мы можем использовать это так:
src/index.js :
new Vue({
el: "#app",
mounted() {
this.$refs.input.focus();
}
});
index.html :
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input ref="input" />
</div>
<script src="src/index.js"></script>
</body>
</html>
В приведенном выше примере мы добавили ref с именем input в шаблон, а затем получили доступ к элементу ввода с помощью:
this.$refs.input
И затем вызвал focus на него в хук mounted.
Это позволяет нам сфокусировать ввод сразу после загрузки элемента ввода.
Мы также можем получить доступ к методам дочернего компонента следующим образом:
src/index.js :
Vue.component("base-input", {
methods: {
focus() {
this.$refs.input.focus();
}
},
template: `<input ref='input' />`
});
new Vue({
el: "#app",
mounted() {
this.$refs.baseInput.focus();
}
});
index.html :
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<base-input ref="baseInput"></base-input>
</div>
<script src="src/index.js"></script>
</body>
</html>
В приведенном выше коде наш корневой экземпляр Vue при монтировании вызвал base-input focus метод.
Следовательно, мы видим, что вход находится в фокусе при загрузке base-input.
Внедрение зависимости
Чтобы предотвратить прямой доступ к родительскому компоненту и корневому экземпляру Vue, мы можем использовать внедрение зависимостей, чтобы получить компонент, который мы хотим получить.
Мы можем использовать его следующим образом:
src/index.js :
Vue.component("foo-button", {
methods: {},
inject: ["toggleFoo"],
template: `<button @click='toggleFoo'>Toggle Foo</button>`
});
new Vue({
el: "#app",
data: {
foo: ""
},
provide() {
return {
toggleFoo: this.toggleFoo
};
},
methods: {
toggleFoo() {
this.foo = this.foo === "foo" ? "" : "foo";
}
}
});
index.html :
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<foo-button></foo-button>
{{foo}}
</div>
<script src="src/index.js"></script>
</body>
</html>
В приведенном выше коде мы добавили метод provide для возврата объекта с элементами, которые мы хотим сделать доступными для дочерних компонентов.
Мы сделали toggleFoo метод корневого экземпляра Vue доступным для нашего foo-button компонента.
Затем в компоненте foo-button мы внедрили метод toggleFoo от родителя к foo-button, а затем мы вызываем его, когда на кнопке запускаются события щелчка.
Мы, как обычно, включили в шаблон foo-button.
В конце концов, мы должны увидеть, что мы переключаем слово foo на экране, когда нажимаем на кнопку.
Заключение
Мы можем получить доступ к корневому экземпляру Vue с помощью $root и к родительскому компоненту с помощью $parent.
Чтобы получить доступ к дочернему компоненту от родителя, мы можем присвоить ref имя дочернему компоненту, а затем использовать this.$refs для доступа к нему.
Эти свойства не следует использовать слишком часто, потому что они быстро создают беспорядок.
Чтобы доступ к внешним компонентам оставался чистым и отслеживаемым, мы можем использовать внедрение зависимостей, определив метод provide для раскрытия определенных частей компонента и используя inject для получения предоставленных частей.
