Пользовательские события в Vue. js 2 - PullRequest
Новая
       51

Пользовательские события в Vue. js 2

0 голосов
/ 30 января 2020

Я пытаюсь выяснить, как заставить дочерний компонент взаимодействовать с родительским компонентом без жесткой связи между ними.

Из того, что я прочитал, пользовательские события должны быть предметом , Но я не могу заставить родительский компонент получать и воздействовать на событие.

В моем примере ниже я ожидаю, что нажатие на кнопку «Сделать вещи» в <child> вызовет doStuff() в <parent> , Я вижу сообщение журнала, которое указывает, что кнопка была нажата, но я не вижу сообщения журнала, указывающего, что отправленное сообщение было когда-либо получено родителем.

Пример HTML: 

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>

  <body>
    <div id="app">
      <parent>
        <child></child>
      </parent>
    </div>
  </body>
</html>

Образец Javascript: 

Vue.component('parent', {
    props: [],
    template: `
        <div v-on:stuff="doStuff">
            <h1>Hello World (from parent)!</h1>
            <slot></slot>
        </div>
    `,
    methods: {
      doStuff: function() {
        console.log('Do stuff');
      }
    }
});

Vue.component('child', {
    props: [],
    template: `
        <div>
            Hello World (from child)!<br>
            <button v-on:click="performClick">Do stuff</button>
        </div>
    `,
    methods: {
      performClick: function() {
        console.log('Do something');
        this.$emit('stuff');
      }
    }
});

var app = new Vue({
  el: '#app',
})

1 Ответ

1 голос
/ 30 января 2020

У вас неправильный доступ к испущенным. stuff испускается из дочернего компонента, поэтому вам необходимо получить доступ к этому испусканию в теге дочернего компонента , поэтому вы должны использовать тег дочернего компонента в шаблоне родительского компонента . Как ниже 

Vue.component('parent', {
    props: [],
    template: `
        <div>
            <h1>Hello World (from parent)!</h1>
            <slot :test="doStuff"></slot>
        </div>
    `,
    methods: {
      doStuff: function() {
        console.log('Do stuff');
      }
    }
});

Vue.component('child', {
    props: [],
    template: `
        <div>
            Hello World (from child)!<br>
            <button v-on:click="performClick">Do stuff</button>
        </div>
    `,
    methods: {
      performClick: function() {
        console.log('Do something');
        this.$emit('stuff');
      }
    }
});

var app = new Vue({
  el: '#app'
})
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>

  <body>
    <div id="app">
      <parent>
        <template slot-scope="scope"><child v-on:stuff="scope.test"></child></template>
      </parent>
    </div>
  </body>
</html>

Обновлено

Вам необходимо использовать слот и установить область действия слота в родительский компонент , установив, например, :{scopeName} и тогда вы можете получить доступ из шаблона по slot-scope. Когда дочерний компонент испускается, вам просто нужно вызвать это {scopeName}

...