Как использовать v-модель на элементах, не связанных с формой?

Question

Прежде всего, я использую VSwitch компонент Vuetify внутри my-component. Я хочу вернуть значение my-component родителю.

что-то вроде <my-component v-model="returnedData"></my-component>

Тогда внутри <my-component></my-component>

<template>
  <div>
    <v-switch v-model="toggledData" value="John"></v-switch>
    <v-switch v-model="toggledData" value="Andrew"></v-switch>
    <v-switch v-model="toggledData" value="Melissa"></v-switch>
    <v-switch v-model="toggledData" value="Elizabeth"></v-switch>
  </div>
</template>

<script>
export default {
  props: ['value'],
  data () {
    return {
      toggledData: []
    }
  }
}
</script>

Я хочу вернуть значение toggledData родителю, который его использует, если это возможно. Я просматривал сеть некоторое время, и я видел только с входами. Но это было возможно для некоторых компонентов Vuetify, таких как VTreeview, поэтому я подумал, может быть, это возможно.

Answer 1

Использование v-model как в вашем примере:

<my-component v-model="returnedData"></my-component>

(по умолчанию) эквивалентно этому:

<my-component :value="returnedData" @input="returnedData = $event"></my-component>

Любой компонент может поддерживать v-model, просто имея опору value и испуская событие input. Имена реквизита и события могут быть изменены с помощью опции model, см. https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model

Все это предполагает, что вы хотите двустороннее связывание данных. В своем вопросе вы, кажется, подразумеваете, что вы просто хотите передать данные родителю, что является только одним способом. Для этого вам нужно только отправить событие и прослушать его, используя @ listener.

В этом случае было бы непросто создать двустороннюю привязку данных. Самый простой способ - сбросить v-model на v-switch и использовать опору и событие отдельно. Существуют альтернативы, такие как использование v-model с вычисляемым свойством, которое имеет геттер и сеттер, но я не уверен, что это сделает вещи более понятными.

Answer 2

Родительский компонент прослушивает изменения ребенка с помощью childToParent, и, если есть какие-либо изменения, я вызываю метод childChanged ()

// Parent Component

<template>
  <div id="parent">
    <p>{{parentToggledData}}</p>
    <Child v-on:childToParent="childChanged"/>
  </div>
</template>

<script>
import Child from "./Child";
export default {
  name: "parent",
  components: {
    Child
  },
  data() {
    return {
      parentToggledData: []
    };
  },
  methods: {
    childChanged(value) {
      this.parentToggledData = value;
    }
  }
};
</script>

. Я слушаю изменения на каждом v-switch, иесли он есть, я вызываю метод emitToParent () в этом методе, я отправляю изменения родителю с $emit, который принимает в качестве параметра событие, прослушиваемое родителем childToParent и "значение для отправки this.toggledData

// Child Component

<template>
  <div id="child">
    <v-switch v-model="toggledData" value="John" @change="emitToParent"></v-switch>
    <v-switch v-model="toggledData" value="Andrew" @change="emitToParent"></v-switch>
    <v-switch v-model="toggledData" value="Melissa" @change="emitToParent"></v-switch>
    <v-switch v-model="toggledData" value="Elizabeth" @change="emitToParent"></v-switch>
  </div>
</template>

<script>
export default {
  name: "child",
  data() {
    return {
      toggledData: []
    };
  },
  methods: {
    emitToParent(event) {
      console.log(event)
      console.log(this.toggledData)
      this.$emit("childToParent", this.toggledData);
    }
  }
};
</script>

Answer 3

Вы можете сделать что-то вроде этого: <v-switch @change="$emit('swithValue', value)" value="John"></v-switch> Тогда в вашем родительском компоненте просто прослушайте swithcValue как @switchValue="myFunction" Ваша функция неявно получает значение, и вы можете делать это по своему желанию.