Как «деструктурировать» пропсы в Vue, как в React

Исходя из React, мне очень нравилось передавать деструктурированные реквизиты дочерним компонентам, я думал, что это делает компоненты чище и легче для чтения. Недавно я много работал во Vue и решил поделиться тем, как сделать то же самое, что и в React, но во Vue.

Тощий

<my-component v-bind="propsObjectIWantToSendToChild" />

Не такой уж и худой

Что делает v-bind?

Из документов:

Динамически привязать один или несколько атрибутов или свойство компонента к выражению.

Что это значит?

Мы знаем, что в HTML мы можем добавить класс в качестве атрибута.

<p class="my-class">Here is a p tag</p>

Но в Vue мы можем захотеть условно установить класс, используя какой-нибудь Javascript.

computed: { loadingClass() { return isLoading ? 'active' : ''; } } // template
<p v-bind:class="loadingClass">Here is a p tag</p>

Или мы можем использовать красивое сокращение, которое Vue дает нам для v-bind, удаляя v-bind и просто добавляя :class

<p :class="loadingClass">Here is a p tag</p>

Проходящий реквизит

Обычно, если я хочу передать свойства компоненту, мы делаем что-то похожее на пример выше.

<my-component :user-id="userId" :user-name="userName" />

Но иногда нам нужно передать больше, чем 1 или 2 реквизита, и становится немного сложно отслеживать и раздувать шаблон.

Вставить v-bind

Мы можем взять тот же компонент и сделать что-то вроде следующего.

// my_parent_component.vue
computed: { myProps() {
  return { userName: this.userName, userId: this.userId };
},
// template
<my-component v-bind="myProps" />

Затем в моем компоненте вы объявляете свои реквизиты, как и любой другой компонент:

// my_component.vue
props: {
  userId: {
    required: true,
    type: String,
  },
  userName: {
    required: true,
    type: String,
  },
},

Надеюсь, это поможет очистить ваши шаблоны, и вы чему-то научились.

Ресурсы

• https://vuejs.org/v2/guide/components-props.html
• https://vuejs.org/v2/api/#v-bind

Первоначально опубликовано на https://scottistern.com 22 мая 2020 г.