diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-08-10 03:10:29 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-08-10 03:10:29 +0300 |
commit | 981771279a48c03263e29f3b4f41f54204ea3146 (patch) | |
tree | 5e48e8debb84850147d183b094ffcd9d8b084c48 /doc/development/fe_guide/vue.md | |
parent | a8648ba08604085c76be1e4f5253ffa89aa192e3 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'doc/development/fe_guide/vue.md')
-rw-r--r-- | doc/development/fe_guide/vue.md | 69 |
1 files changed, 64 insertions, 5 deletions
diff --git a/doc/development/fe_guide/vue.md b/doc/development/fe_guide/vue.md index 0a769f257d0..509e2f4b688 100644 --- a/doc/development/fe_guide/vue.md +++ b/doc/development/fe_guide/vue.md @@ -66,12 +66,68 @@ To do that, you can use the `data` attributes in the HTML element and query them You should only do this while initializing the application, because the mounted element is replaced with a Vue-generated DOM. -The advantage of providing data from the DOM to the Vue instance through `props` in the `render` -function instead of querying the DOM inside the main Vue component is avoiding the need to create a -fixture or an HTML element in the unit test, which makes the tests easier. +The advantage of providing data from the DOM to the Vue instance through `props` or +`provide` in the `render` function, instead of querying the DOM inside the main Vue +component, is that you avoid the need to create a fixture or an HTML element in the unit test. -See the following example. Also, please refer to our [Vue style guide](style/vue.md#basic-rules) for -additional information on why we explicitly declare the data being passed into the Vue app; +##### provide/inject + +Vue supports dependency injection through [provide/inject](https://vuejs.org/v2/api/#provide-inject). +Values passed to the component through `provide` can be accessed in the component the `inject` configuration. +In the following example of a Vue app initialization, a value from HAML is passed to the component +through the `provide` configuration: + +```javascript +#js-vue-app{ data: { endpoint: 'foo' }} + +// index.js +const el = document.getElementById('js-vue-app'); + +if (!el) return false; + +const { endpoint } = el.dataset; + +return new Vue({ + el, + render(createElement) { + return createElement('my-component', { + provide: { + endpoint + }, + }); + }, +}); +``` + +The component, or any of its child components, can access the property through `inject` as: + +```vue +<script> + export default { + name: 'MyComponent', + inject: ['endpoint'], + ... + ... + }; +</script> +<template> + ... + ... +</template> +``` + +Using dependency injection to provide values from HAML is ideal when: + +- The injected value doesn't need an explicit validation against its data type or contents. +- The value doesn't need to be reactive. +- There are multiple components in the hierarchy that need access to this value where + prop-drilling becomes an inconvenience. Prop-drilling when the same prop is passed + through all components in the hierarchy until the component that is genuinely using it. + +##### props + +If the value from HAML doesn't fit the criteria of dependency injection, use `props`. +See the following example. ```javascript // haml @@ -99,6 +155,9 @@ return new Vue({ > When adding an `id` attribute to mount a Vue application, please make sure this `id` is unique across the codebase. +For more information on why we explicitly declare the data being passed into the Vue app, +refer to our [Vue style guide](style/vue.md#basic-rules). + #### Providing Rails form fields to Vue applications When composing a form with Rails, the `name`, `id`, and `value` attributes of form inputs are generated |