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

Question

I have two components in one js file, file starts with const EventBus = new Vue();

I want to send two strings 'username' and 'password' from first component to seconod component, but I can't do it. Where I am wrong?

First:

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);
        },
    }

});

Second:

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

You will need to use EventBus.$on within the created lifecycle method, to "register" receiving the events.

You can also skip the EventBus and just use 'built in' event handlers..

Using Event Bus:

 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>

Using 'built-in' 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>

Answer 2

1. Handlers that are indicated in EventBus.$on should be functions and not props themself.
2. Did you call register method before starting the use of the log-reg-modal component?

Answer 3

EventBus.$on methods should be in created() functions in according to Vue lifecycle

created (){
        EventBus.$on('changed_username', (data) => {
            this.username = data;
          });
        EventBus.$on('changed_password', (data) => {
            this.password = data;
          });
}