从组件内更改 vue 实例变量

Question

我一直在自学 Vue.js，并一直在利用组件来增加模块化。

我正在努力解决的一件事是从组件内部操作 Vue 实例中的变量。通过将翡翠文件中的变量作为道具传递，我已经让它在组件内与v-model 很好地配合

例如loginform(slot="login-form" v-bind:form-submit="loginSubmit" v-bind:login-data="loginData")

其中 loginData 包含变量用户名和密码，它们是组件内输入的'v-modelled'。然后在组件模板中：

<input type="password" class="text-field" v-model="formData.password" />

但是，我有一个工具提示组件，我想使用两次：一个用于用户名字段，另一个用于密码字段。这些工具提示的可见性分别由tooltips.username.vis 和tooltips.password.vis 给出。

尽管组件中的v-model 没有发出这些警告，但我似乎无法将该变量作为道具传递以便在没有得到avoid manipulating props 警告的情况下进行操作。工具提示组件如下：

Vue.component('tooltip', {
  props: ['show', 'message', 'click'],
  template:
    <transition name="shrink">
      <div v-show="show" v-on:click="click" class="tooltip">
        <div class="tooltip-arrow"></div>
        <div class="tooltip-container">{{message}}</div>
      </div>
    </transition>
}); 

有没有人知道如何实现所需的效果（在鼠标单击时隐藏工具提示）。我尝试将一个方法作为 click 属性传递，该方法根据工具提示是用于用户名还是密码输入而具有不同的参数，但是我得到了单击未定义的警告。我可以创建两个单独的函数，但我宁愿不明确编写两个做同样事情的函数。

Answer 1

您不应该尝试从组件内修改 props，因为 Vue 的警告告诉您，对 props 的更改不会从组件流向 props，因此任何更改都将被覆盖。

对于您想要实现的目标，您应该查看 Vue 的自定义事件 https://vuejs.org/v2/guide/components-custom-events.html

HTML

<div id="app">
   <form>
        <div>
           <label>Username</label>
           <input type="username" v-model="formData.username" />
           <tooltip :show="tooltips.username.vis" 
    :message="tooltips.username.message" @tooltip:hide="tooltips.username.vis = false" />
        </div>

        <div>
           <label>Password</label>
           <input type="text" v-model="formData.password" />
           <tooltip :show="tooltips.password.vis" 
   :message="tooltips.password.message" @tooltip:hide="tooltips.password.vis = false" />
        </div>
   </form>
</div>

JS

Vue.component('tooltip', {
  props: ['show', 'message'],
  template: `<transition name="shrink">
      <div v-show="show" class="tooltip" @click="hide">
        <div class="tooltip-arrow"></div>
        <div class="tooltip-container">{{message}}</div>
      </div>
    </transition>`,
  methods: {
    hide () {
      this.$emit('tooltip:hide');
    },
  }
}); 

new Vue({
    el: "#app",
    data: {
      formData: {
        username: '',
        password: ''
      },
      tooltips: {
        username: {
            message: 'Fix your username',
            vis: true
        },
        password: {
            message: 'Fix your password',
            vis: true
        }
    }
    }
});

https://jsfiddle.net/10fjkoob/12/