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总线。但是我只想将事件传递给直接父项，而不想冒泡。其次，即使生成事件总线事件，我也不确定如何删除节点。

Answer 1

我将为每个对象分配唯一的ids，以标识它们所处的位置，并在id时搜索特定的deleting。 Fiddle

这是您需要更改的几件事。

1）在deleteme组件上调用treeview发射事件，以便父级可以收听它。
<treeview @deleteme="callDeleteParent">。

2）在树视图组件中，返回{}内的空白对象data()。并直接在dom中使用prop值。这样可以确保每次treeData值更改时DOM都会更新。

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

找到工作的小提琴here。

如何在Vue JS中将事件传递给嵌套组件中的直接父级

1 个答案: