Отследить событие во вложенном компоненте Vue

Question

Начинаю разбираться с vue и столкнулся с трудностью требующей пояснения.

У меня есть компонент "Content", в который вложен компонент "Page1". В Page1 есть текстовое поле, и мне нужно как-то отследить его изменение на уровне "Content.

Content:

import { createComponent, reactive, toRefs, onMounted, ref, watch } from "@vue/composition-api";
import Page1 from "../Page1/App.vue";

export default createComponent({
    components: {
        Page1
    },
    methods: {
        check: function (event) {
            console.log("its change"); // не работает
        }
    }
});

Page1:

<template>
    <div>
       <div><imput v-on:change="check"/></div>
    </div>
    </template>

Answer 1

При использовании композиционного подхода (как видно из фрагмента вашего кода), можно опираться на глобально импортированные API-интерфейсы Vue.

Таким образом достаточно создать эти самые интерфейсы и подключить их там, где они нужны. В отличии от компонентного подхода, не требуется передавать данные и события в дочерние компоненты, чтобы совершить манипуляции с ними, достаточно полагаться на созданный API.

Привожу пример, чтобы наглядно продемонстрировать вышесказанное (пример содержит вложенные компоненты, чтобы показать двустороннюю связку)

Vue.use(vueCompositionApi.default);
const {
  ref,
  createComponent
} = vueCompositionApi;

// создаем необходимые данные
const inputValue = vueCompositionApi.ref('text');
const countEvent = vueCompositionApi.ref(0);
// в том числе и функцию (которая допустим будет выводить новое значение в консоль и увеличивать счетчик вызова этой функции)
const check = (event) => {
  console.clear();
  console.log("its change", inputValue.value); // не работает
  countEvent.value++
}
// создаем компонент
const Page1 = createComponent({
  template: `
		<div class="child">
      <input v-model="inputValue" @input="check"/>
      <slot></slot>
		</div>
		`,
  setup() {
    return {
      inputValue,
      check
    }
  }
});

// инициализируем приложение
new Vue({
  el: '#app',
  components: {
    Page1
  },
  setup() {
    return {
      inputValue,
      check,
      countEvent
    }
  },
})

#app {
  background: #eee;
  padding: 1em;
  line-height: 1.5em;
}

.child {
  background: rgba(0,0,0,.1);
  padding: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://unpkg.com/@vue/composition-api/dist/vue-composition-api.umd.js"></script>

<div id="app">
  <Page1 v-model="inputValue">
    <Page1 v-model="inputValue">
    </Page1>
  </Page1>
  inputValue в родителе = {{ inputValue }}
  <br> Событие check вызвано {{ countEvent }} раз
</div>

БЛОГ НА HUSL

Отследить событие во вложенном компоненте Vue

Ответы (1 шт):