Блог

У меня есть основной компонент, содержащий другие компоненты, которые содержат другие компоненты.

Итак, у меня есть события щелчка в этих компонентах, но чтобы обработать их в моем родительском компоненте, мне нужно выполнить $emit вызов в каждом вложенном компоненте.

Как сделать этот процесс более простым, например, как в React, где мне нужно просто передать обработчик функции в компонент.

В vue 2.2.3 вы можете использовать provide и inject для передачи функции от компонента-предка к дочернему элементу, например, от прародителя к дочернему элементу.

пожалуйста, обратитесь к следующему коду

     // app.vue
    <template>
      <div id="app">
        <HelloWorld msg="button1" />
        <HelloWorld msg="button2" />
        <HelloWorld msg="button3" />
        count: {{ count }}
      </div>
    </template>
    
    <script>
    import HelloWorld from "./components/HelloWorld";
    
    export default {
      name: "App",
      provide() {
        return {
          clickHandler: this.clickHandler,
        };
      },
      data() {
        return {
          count: 0,
        };
      },
      components: {
        HelloWorld,
      },
      methods: {
        clickHandler() {
          this.count  = 1;
          console.log("click received");
        },
      },
    };
    </script>
 

     // HelloWorld.vue
    <template>
      <button @click="clickHandler">{{ msg }}</button>
    </template>
    
    <script>
    export default {
      name: "HelloWorld",
      inject: ["clickHandler"],
      props: {
        msg: String,
      },
    };
    </script>
 

вы можете видеть, что одна и та же clickHandler функция от родительского элемента выполняется с изменением родительской count опоры по щелчку каждого дочернего элемента.

это clickHandler может быть введено непосредственно любому потомку на любом уровне, поэтому приложение, подобное

parent > child.1 > child.1.1 > child.1.1.1 > child.1.1.1.1(click)

они child.1.1.1.1 могут быть введены с clickHandler помощью родительской формы.

попробуйте код в codesandbox

также см. provide / inject

если вам нужно такое же значение в иерархии или где-либо в текущем модуле, вам следует попробовать использовать библиотеку Vuex (управление состоянием).