вам нужно испустить событие для реактивных объектов в vue3?

Я не совсем понял, как v-модель работает для компонентов, проверьте мой код:

    <template>
      <a-form-item name="bananas" label="bananas">
        <a-input v-model:value="test.bananas" />
      </a-form-item>
    </template>
    
    <script>
    import { computed, defineComponent } from 'vue'
    
    export default defineComponent({    
      props: {
        formData: {
          type: Object,
          required: true
        }
      },
      setup(props) {
        const test = computed(() => props.formData)
        return { test }
      }
    })
    </script>

где formData в родительском компоненте является реактивным объектом

    <InnerComponent v-model:formData="formData" />

    const formData = reactive({
      name:'',
      .....
      bananas: 'bananas',
    })

этот код работает, а точнее кажется, что объект formData обновляется при изменении входных бананов .... но как? чтение документов с использованием v-модели в компонентах, я также должен определить для него функцию обновления, также это объект, и нет примеров с использованием отзывчивых объектов

Кто-нибудь может объяснить?

все это потому, что для создания очень большой формы мне нужно разделить различные разделы на подкомпоненты, передав реактивный объект всем дочерним элементам.


vuejs3 vue-composition-api
person claud.io    schedule 07.01.2021    source источник

Ответы (1)


arrow_upward
3
arrow_downward

из https://stackoverflow.com/a/65604790/197546

v-модель - это синтаксический сахар для :value и @change
Вместо <input v-model="name"> вы можете использовать
<input :value="name" @update:model-value="v => name=v">

Если вы используете v-model, вам не нужно использовать излучатели и слушатели. В vue 3 вы можете указать, к какой переменной вы хотите применить этот синтаксический сахар, через определение двоеточия, как вы сделали с v-model:formData. Это позволяет компонентам иметь более одной переменной, доступной через v-модель, что может быть очень полезно в более сложных настройках компонентов.

если вы передаете переменную reactive, вам вообще не нужно использовать v-модель, поскольку reactive предоставляет доступ к внутренним компонентам Vue, поэтому в случае reactive реактивность обрабатывается отдельно от взаимодействия родитель-потомок. Независимо от того, передается ли реактивность дочернему элементу как опора или из глобальной ссылки, реактивность будет работать во всех экземплярах.

Кстати, refs не допустит этого таким же образом. хотя вы все еще можете передать их как глобальные, передача его как опоры не сработает. Он будет вести себя как обычная опора, продолжая получать обновления от родителя, но локальные изменения не распространяются за пределы области действия компонента.

person Daniel    schedule 07.01.2021
comment
привет Даниэль, спасибо за ответ. Поэтому я понимаю, что использование v-модели необходимо, когда вам нужно настроить функцию обновления объекта или упростить двустороннюю привязку примитива во входных данных. В таких случаях, как мой, когда объект, переданный компоненту, реагирует, мне не нужна функция обновления, поскольку она обновляется при изменении ввода в дочернем элементе. Совершенно верно? тогда я мог бы также использовать только v-bind, чтобы передать его потомку, вместо v-модели нет? - person claud.io; 07.01.2021
comment
хорошо, я неправильно понял вопрос. Да, если вы передаете reactive, вам не нужно использовать v-model. ref и reactive раскрывают внутреннее устройство Vue, поэтому в случае reactive реактивность обрабатывается отдельно от взаимодействия родитель-потомок (однако refs не допускают этого таким же образом) - person Daniel; 07.01.2021
comment
Спасибо, действительно хороший ответ. С наилучшими пожеланиями - person claud.io; 08.01.2021