0

首先，我在内部使用 Vuetify 的VSwitch组件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所以我想也许是可能的。

4

3 回答 3

1

在您的示例中使用v-modellike ：

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

（默认情况下）等价于：

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

任何组件都可以v-model通过拥有一个valueprop 并发出一个input事件来支持。可以使用该model选项更改道具和事件的名称，请参阅https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model

所有这些都假设您需要双向数据绑定。在您的问题中，您似乎暗示您只想将数据传递给父级，这只是一种方式。为此，您只需要发出一个事件并使用@侦听器侦听该事件。

在这种情况下，真正创建双向数据绑定会很棘手。最简单的方法是放下v-model并v-switch分别使用道具和事件。还有其他选择，例如使用v-model具有 getter 和 setter 的计算属性，但我不相信这会使事情变得更清晰。

于 2019-05-19T09:18:26.627 回答
0

你可以这样做： <v-switch @change="$emit('swithValue', value)" value="John"></v-switch> 然后在你的父组件中只听swithcValue你@switchValue="myFunction"的函数隐式地获取发出的值，你可以随心所欲地使用它。

于 2019-05-19T08:57:18.790 回答
0

父组件监听子组件的变化，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>
于 2019-05-19T10:02:43.797 回答