Как во vue 3 массово передать пропсы в дочерний компонент?

В Vue 3 существуют несколько способов передачи пропсов в дочерние компоненты. Рассмотрим каждый из них подробно.

1. Передача пропсов через атрибуты (props) в шаблоне:
В Vue 3 предпочтительным способом является передача пропсов через атрибуты в шаблоне компонента. Для этого нужно определить необходимые пропсы в опции props дочернего компонента. В примере ниже родительский компонент передает пропс message в дочерний компонент:

   // Дочерний компонент
   const ChildComponent = {
     props: ['message'],
     template: '<div>{{ message }}</div>'
   };

   // Родительский компонент
   const ParentComponent = {
     components: {
       ChildComponent
     },
     template: '<ChildComponent :message="messageProp" />',
     data() {
       return {
         messageProp: 'Привет, мир!'
       };
     }
   };

В данном примере ChildComponent принимает пропс message, который выводится внутри шаблона компонента. Родительский компонент ParentComponent передает значение пропса messageProp в дочерний компонент через атрибут :message="messageProp".

2. Передача пропсов через объект context:
Еще один способ передачи пропсов в дочерние компоненты в Vue 3 - использование объекта context. Этот подход может быть полезен, если вы хотите передать несколько пропсов или если необходимо передать пропсы внутри JavaScript кода. Ниже приведен пример:

   // Дочерний компонент
   const ChildComponent = {
     setup(props, context) {
       const { message, count } = props;
       return {
         message,
         count,
         logProps() {
           console.log(context.attrs);
         }
       };
     },
     template: '<div>{{ message }}, {{ count }}</div>'
   };

   // Родительский компонент
   const ParentComponent = {
     components: {
       ChildComponent
     },
     template: `
       <div>
         <ChildComponent :message="messageProp" :count="countProp" />
         <button @click="logProps">Вывести пропсы</button>
       </div>
     `,
     data() {
       return {
         messageProp: 'Привет, мир!',
         countProp: 42
       };
     },
     methods: {
       logProps() {
         this.$refs.childComponent.logProps();
       }
     }
   };

В данном примере ChildComponent принимает два пропса message и count. Они передаются из родительского компонента через атрибуты в шаблоне. В компоненте ChildComponent используется функция setup, где пропсы доступны через параметр props. Также мы можем получить доступ ко всем пропсам через объект context с помощью свойства attrs. В родительском компоненте ParentComponent мы можем вызвать метод logProps, который выводит все пропсы дочернего компонента в консоль.

3. Использование слотов (slots) для передачи содержимого:
В Vue 3 можно использовать слоты для передачи содержимого в дочерний компонент. Это может быть полезно, если вам необходимо передать динамическое содержимое или если вам нужно использовать контент, который находится между тегами открывающего и закрывающего тегов дочернего компонента. Ниже приведен пример:

   // Дочерний компонент
   const ChildComponent = {
     template: `
       <div>
         <h2>Содержимое слота:</h2>
         <slot></slot>
       </div>
     `
   };

   // Родительский компонент
   const ParentComponent = {
     components: {
       ChildComponent
     },
     template: `
       <div>
         <ChildComponent>
           <p>Это мое содержимое</p>
         </ChildComponent>
       </div>
     `
   };

В данном примере ChildComponent имеет слот, который будет замещен содержимым, переданным из родительского компонента. В родительском компоненте ParentComponent мы передаем содержимое <p>Это мое содержимое</p> внутрь компонента ChildComponent.

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