Как передать события непосредственному родителю во вложенных компонентах в Vue JS

Question

Я строю дерево, которое является рекурсивным и вложенным.Чтобы удалить, я хочу передать событие его родителям, используя $ event.Но я не могу получать события.

Вот мой код на JSFiddle.https://jsfiddle.net/shishirraven/x4s917au/

    Vue.component('treeview', {
      template: `
        <ul class="oye-tree-view" @deleteme="wow()" >
              <li class="open">? {{node_name}} 
                  <div @click="$emit('deleteme')" class="btn btn-sm btn-primary">Delete</div>
                    <template v-for='(node,index) in nodes' >
                    <treeview   v-model="nodes[index]"  :cindex="index"  ></treeview>
                  </template>
              </li>
      </ul>
    `,
      props: ['value', 'cindex'],
      data: function() {
        return this.value
      },
      methods: {
        wow: function() {
          alert("jello");
        }
      }


    });



    var app = new Vue({
      el: '#treeview',
      data: {
        "treeData": {
          "node_name": "Webfort Technologies",
          "nodes": [{
              "node_name": "Core PHP",
              "nodes": []
            },
            {
              "node_name": "Wordpress",
              "nodes": []
            },
            {
              "node_name": "Joomla",
              "nodes": []
            },
            {
              "node_name": "Drupal",
              "nodes": []
            },
            {
              "node_name": "Android",
              "nodes": []
            },
            {
              "node_name": "iOS",
              "nodes": [{
                  "node_name": "Core PHP",
                  "nodes": []
                },
                {
                  "node_name": "Wordpress",
                  "nodes": []
                },
                {
                  "node_name": "Joomla",
                  "nodes": []
                },
                {
                  "node_name": "Drupal",
                  "nodes": []
                },
                {
                  "node_name": "Android",
                  "nodes": []
                },
                {
                  "node_name": "iOS",
                  "nodes": []
                }
              ]
            }
          ]
        }
      },
      methods: {
        firstMethod: function() {

        }
      }
    })

Для сложных коммуникаций я обнаружил, что предлагается VueX или Event bus.Но я просто хочу передать событие непосредственному родителю и не хочу его пускать.Во-вторых, я не уверен, как я могу удалить узел, даже когда я генерирую событие шины событий.

Answer 1

Я бы назначил уникальный ids каждому объекту, чтобы определить, на каком уровне они находятся, и выполнить поиск этого конкретного id, когда deleting. Fiddle

Это пара вещей, которые вам нужно изменить.

1) Вызвать deleteme событие emit для компонента treeview, чтобы родитель мог его прослушать.
<treeview @deleteme="callDeleteParent">.

2) В компоненте древовидной структуры вернуть пустой объект {} внутри data().И используйте значения опоры прямо в дом.Это гарантирует, что DOM обновляется каждый раз при изменении значения treeData.

<ul class="oye-tree-view"  >
      <li class="open">? {{value.node_name}}
          <div @click="deleteit(value.node_name,value.id)" class="btn btn-sm btn-primary">Delete</div>
          <template v-for='(node,index) in value.nodes' >
            <treeview @deleteme="callDeleteParent"  v-model="node"  :cindex="index"  ></treeview>
          </template>
      </li>
</ul>

3) Как только событие передается родительскому объекту, вы можете удалить объект, используя id, рекурсивно обходя объекты массиванайти id.

function removeFromTree(parent, childIdToRemove){
    if(parent.id==childIdToRemove){//Webfort Technologies (parent)
       return [];
    }
      parent.nodes = parent.nodes
        .filter(child =>  child.id !== childIdToRemove)
        .map(child => removeFromTree(child, childIdToRemove));
      return parent;
   }
  this.treeData = removeFromTree(this.treeData, obj.id);

Найти рабочую скрипку здесь .