Question

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

我正在努力解决的一件事是在组件内操作Vue实例中的变量。通过将jade文件中的变量作为prop

传递，我可以在组件中使用v-model。

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

其中loginData包含变量username＆amp;密码，它是组件内输入的'v-modelled'。然后在组件模板中：

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

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

我似乎无法将该变量作为道具传递，以便在没有得到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 prop，它具有不同的参数，具体取决于工具提示是用于用户名还是密码输入，但是我得到了单击未定义的警告。我可以创建两个单独的函数，但我不想明确地编写两个执行相同操作的函数。

Answer 1

你不应该尝试修改组件中的道具，因为Vue的警告告诉你，道具的更改不会从组件流向道具，因此任何更改都将被覆盖。

对于您想要实现的目标，您应该查看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/

从组件

1 个答案: