组件通信的 VUETIFY 问题（道具/事件 - 父子通信）

Posted 2023-02-23

【中文标题】组件通信的 VUETIFY 问题（道具/事件 - 父子通信）

【英文标题】：VUETIFY Problem With Component Communication (Props / Events - Parent Child Communication)

【发布时间】：2019-08-31 15:27:13

【问题描述】：

Vuetify 组件通信问题（Props / Events - 父子通信）

您好，我尝试像本教程一样在父子之间传递数据： https://www.youtube.com/watch?v=PPmg7ntQjzc

常规的 html 输入可以正常工作（就像在教程中一样）。

但是 vuetify 文本字段或文本区域不起作用。 （一开始似乎很好。当我开始输入时，它给出了错误）

我做错了什么？

// 子 HTML

    <input
      type="text"
      placeholder="regular child"
      :value="valueRegularChild"
      @input="inputRegularChild"
      >
    <p> regularInputValue </p> 


    <v-textarea
          type="text"
          placeholder="vuetify child"
          :value="valueVuetifyChild"
          @input="inputVuetifyChild"
      ></v-textarea>
    <p> vuetifyInputValue </p>

// 子 - 方法

        inputVuetifyChild($event) 
            this.vuetifyInputValue = $event.target.value;
            this.$emit('msgVuetify', this.vuetifyInputValue);
        ,
        inputRegularChild($event) 
            this.regularInputValue = $event.target.value;
            this.$emit('msgRegular', this.regularInputValue);
        ,

// 父级 HTML

<child-component
        :valueVuetifyChild="insideParentVuetify"
        :valueRegularChild="insideParentRegular"
        @msgVuetify="insideParentVuetify = $event"
        @msgRegular="insideParentRegular = $event"
>
<child-component>

一切都一样。

正常工作，Vuetify 不行

consol 日志错误说：

TypeError: 无法读取未定义的属性“值”

提前致谢

【问题讨论】：

快速扫了一眼，但可以试试:input-value="valueVuetifyChild" 而不是:value？或者只是$event 而不是$event.target.value。 Vuetify 有时会使用与原生组件不同的道具和事件。

是的，$event.target 是未定义的。试试inputRegularChild($event) console.log($event)，看看你可以在那里使用什么。

@Traxo & @ Andrew1325 是的，你是对的。 $event 而不是 $event.target.value 完美。谢谢。它也适用于选择菜单。但是，it don't work with checkbox or radios。你也可以为他们推荐一些东西吗？

【参考方案1】：

我认为 v-model 而不是 :value 应该可以正常工作，但还没有时间测试 ist。

// 子 HTML

    <input
      type="text"
      placeholder="regular child"
      v-model="valueRegularChild"
      @input="inputRegularChild"
      >
    <p> regularInputValue </p> 


    <v-textarea
          type="text"
          placeholder="vuetify child"
          v-model="valueVuetifyChild"
          @input="inputVuetifyChild"
      ></v-textarea>
    <p> vuetifyInputValue </p>

// 子 - 方法

        inputVuetifyChild($event) 

            this.$emit('msgVuetify', this.vuetifyInputValue);
        ,
        inputRegularChild($event) 

            this.$emit('msgRegular', this.regularInputValue);
        ,

// 父级 HTML

<child-component
        :valueVuetifyChild="insideParentVuetify"
        :valueRegularChild="insideParentRegular"
        @msgVuetify="insideParentVuetify = $event"
        @msgRegular="insideParentRegular = $event"
>
<child-component>

【讨论】：

我试过了，但是不行。它给出了错误（不仅是 vuetify 文本字段，还有输入区域）错误说：commons.app.js:12663 [Vue 警告]：避免直接改变一个道具，因为每当父组件重新渲染时，该值都会被覆盖。相反，使用基于道具值的数据或计算属性。正在变异的道具：“valueRegularChild”

好吧，对不起，我没看到它是道具...我需要稍后再看一下..

@Iwolf 它适用于上述示例（$event 而不是 $event.target.value），但不适用于复选框和收音机。你有什么建议吗？

很高兴听到这个消息！你是在使用<input type="checkbox" /> 之类的复选框还是来自 vuetify 的东西？

我使用 v-checkbox。我实际上设法单独传递单个值。但我无法将它们组合成单个数组。 （换句话说，我可以在多个单独的字符串中获取值，而不是在单个数组中）。当然我可以在父组件中做到这一点，但我试图找到一种方法来做到这一点子组件