VueJs 树递归元素发送到父级

Question

如何在递归子组件 vuejs 中发出事件

从 vue 站点获取树示例 https://v2.vuejs.org/v2/examples/tree-view.html

如何在点击时将每个被点击的元素 id 传输到父级？

Answer 1

如果您不想创建多个 Vue 实例，这是另一个解决方案。我在我的单文件递归组件中使用它。

它使用

v-on

指令（我使用的是

@

简写）。

在你的递归组件中

<template>

：

<YourComponent @bus="bus"></YourComponent>

在递归组件中

methods

:

methods: {
    bus: function (data) {
        this.$emit('bus', data)
    }
}

要启动它，您需要在子进程中发出一个事件：

this.$emit('bus', {data1: 'somedata', data2: 'somedata'})

该数据将沿着链一路传输，然后您在调用递归组件的页面中接收该事件：

methods: {
    bus (data) {
        // do something with the data
    }
}

这里有一个小提琴，展示了它在 Vue.JS 树示例上的运行情况。右键单击某个元素，它会在控制台中输出该模型：

https://jsfiddle.net/AlanGrainger/r6kxxoa0/

Answer 2

对于递归元素，您可以在父级中创建一个事件总线，将其作为道具传递给子级，并让每个道具将其传递给它们生成的任何子级。

每个子进程在总线上发出事件，由父进程处理它们。我复制了您链接的树视图练习并添加了总线功能。

// demo data
var data = {
  name: 'My Tree',
  children: [{
      name: 'hello'
    },
    {
      name: 'wat'
    },
    {
      name: 'child folder',
      children: [{
          name: 'child folder',
          children: [{
              name: 'hello'
            },
            {
              name: 'wat'
            }
          ]
        },
        {
          name: 'hello'
        },
        {
          name: 'wat'
        },
        {
          name: 'child folder',
          children: [{
              name: 'hello'
            },
            {
              name: 'wat'
            }
          ]
        }
      ]
    }
  ]
};

var itemId = 0;

// define the item component
Vue.component('item', {
  template: '#item-template',
  props: {
    model: Object,
    bus: Object
  },
  data: function() {
    return {
      open: false,
      id: ++itemId
    }
  },
  computed: {
    isFolder: function() {
      return this.model.children &&
        this.model.children.length
    }
  },
  methods: {
    toggle: function() {
      if (this.isFolder) {
        this.open = !this.open;
        this.bus.$emit('toggled', this.id);
      }
    },
    changeType: function() {
      if (!this.isFolder) {
        Vue.set(this.model, 'children', [])
        this.addChild()
        this.open = true
      }
    },
    addChild: function() {
      this.model.children.push({
        name: 'new stuff'
      })
    }
  }
})

// boot up the demo
var demo = new Vue({
  el: '#demo',
  data: {
    treeData: data,
    bus: new Vue()
  },
  created() {
    this.bus.$on('toggled', (who) => {
      console.log("Toggled", who);
    });
  }
})

body {
  font-family: Menlo, Consolas, monospace;
  color: #444;
}

.item {
  cursor: pointer;
}

.bold {
  font-weight: bold;
}

ul {
  padding-left: 1em;
  line-height: 1.5em;
  list-style-type: dot;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<!-- item template -->
<script type="text/x-template" id="item-template">
  <li>
    <div :class="{bold: isFolder}" @click="toggle" @dblclick="changeType">
      {{model.name}}
      <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
    </div>
    <ul v-show="open" v-if="isFolder">
      <item class="item" :bus="bus" v-for="model in model.children" :model="model">
      </item>
      <li class="add" @click="addChild">+</li>
    </ul>
  </li>
</script>

<p>(You can double click on an item to turn it into a folder.)</p>

<!-- the demo root element -->
<ul id="demo">
  <item class="item" :bus="bus" :model="treeData">
  </item>
</ul>

Answer 3

Use v-on="$listeners"

我要告诉你一个小秘密。 Vue

$listeners

属性（记录为将事件传递给子级）也将子级事件传递给父级！

https://v2.vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components

这是一个伪代码示例（出于说明目的的简写）：

<ancestor-component @messageForAncestor="displayMessage">
  ...
  <parent-component v-on="$listeners">
    ...
    <child-component @click="$emit('messageForAncestor')">

在上面的显示中，子组件将传递一个事件。父级通常能够监听

messageForAncestor

事件，这就是它需要停止的地方，但是。将

v-on="$listeners"

放在父项上实际上表示 请传递它。

警告：这可能是个坏主意

但这可能是一个非常糟糕的主意。更好的想法是简单地要求中间组件（父组件）将其传递...

<!-- better idea (listen for message and pass on message) --> 
<parent-component @message="$emit('message', $event)">

Answer 4

我认为最好、最清晰的方法就在这里：

https://www.digitalocean.com/community/tutorials/vuejs-communicating-recursive-components

因此，您需要传递函数作为参数。当您使用带有递归组件的 Vue 时，这有助于避免 Vue 发出的限制