javascript - 从组件内更改 vue 实例变量

Question

我一直在自学 Vue.js，并一直在利用组件来提高模块化程度。

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

例如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分别。

我似乎无法将该变量作为 Prop 传递，以便在不获取 avoid manipulating props 的情况下进行操作。警告，尽管 v-model在组件内不给出这些警告。工具提示组件如下:

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 属性，该方法根据工具提示是用于用户名还是密码输入而具有不同的参数，但是我收到了 click undefined 警告。我可以创建两个单独的函数，但我宁愿不显式编写两个执行相同操作的函数。

Answer 1

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

对于您想要实现的目标，您应该查看 Vue 的自定义事件 https://v2.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/