javascript - 为什么我的 watch 方法在 Vue 中不起作用

Question

我在一个 js 文件中有两个组件，文件以 const EventBus = new Vue();

开头

我想将两个字符串“用户名”和“密码”从第一个组件发送到第二个组件，但我做不到。我哪里错了？

第一:

Vue.component('log-reg-modal', {
    data: () => ({
        username: "",
        password: "",
    }),
    watch: {
        username: function(){
            EventBus.$emit('changed_username', this.username);
        },
        password: function(){
            EventBus.$emit('changed_password', this.password);
        },
    }

});

第二:

new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: () => ({
        username: "",
        password: "",
    }),
    methods: {
        register : function (event) {
            EventBus.$on('changed_username', this.username);
            EventBus.$on('changed_password', this.password);
        }
    }
});

Answer 1

您需要在 created 生命周期方法中使用 EventBus.$on 来“注册”接收事件。

您还可以跳过 EventBus 并仅使用“内置”事件处理程序。

使用事件总线:

const EventBus = new Vue();

const LogRegModal = {
  template: `
    <div><input v-model="username" placeholder="Username" />
         <input v-model="password" placeholder="Password" /></div>
  `,
  data: () => ({ username: "", password: "" }),
  watch: {
    username: function() { EventBus.$emit("changed_username", this.username) },
    password: function() { EventBus.$emit("changed_password", this.password) },
  }
};

new Vue({
  el: "#app",
  components: { LogRegModal },
  data: () => ({ username: "", password: "" }),
  created() {
    EventBus.$on("changed_username", val => this.username = val);
    EventBus.$on("changed_password", val => this.password = val);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

<div id="app">
  <Log-Reg-Modal></Log-Reg-Modal>
  <p v-if="username || password"><i>These values were received from the EventBus:</i></p>
  <ul v-if="username || password">
    <li v-if="username"><b>Username:</b> {{username}}</li>
    <li v-if="password"><b>Password:</b> {{password}}</li>
  </ul>
</div>

使用“内置”this.$emit(..., ...):

const LogRegModal = {
  template: `
    <div><input v-model="username" placeholder="Username" />
         <input v-model="password" placeholder="Password" /></div>
  `,
  data: () => ({ username: "", password: "" }),
  watch: {
    username: function() { this.$emit("changed_username", this.username) },
    password: function() { this.$emit("changed_password", this.password) },
  }
};

new Vue({
  el: "#app",
  components: { LogRegModal },
  data: () => ({ username: "", password: "" }),
  methods: {
    handleUsernameChange(val) { this.username = val },
    handlePasswordChange(val) { this.password = val }
  },
});

code {
  color: red;
}
p {
  margin-bottom: 2px;
}
.second-p {
  margin-top: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

<div id="app">
  <!-- ******************************************** -->
  <!--  Notice we are now handling events as props  -->
  <!-- ******************************************** -->
  <Log-Reg-Modal 
    @changed_username="handleUsernameChange"
    @changed_password="handlePasswordChange"
  ></Log-Reg-Modal>
  <div v-if="username || password">
    <p><i>These values were received via </i><code>this.$emit</code> as 'props' on our component using <code>v-on:event_name</code></p>
    <p class="second-p">(using <code>@event_name</code> is shorthand for <code>v-on:event_name</code>):</p>
    <ul>
      <li v-if="username"><b>Username:</b> {{username}}</li>
      <li v-if="password"><b>Password:</b> {{password}}</li>
    </ul>
  </div>
</div>