VueJs Tree递归元素发出给父对象 [英] VueJs Tree recursive elements emits to parent
本文介绍了VueJs Tree递归元素发出给父对象的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何在递归子组件vuejs中发出事件
How do you emit event inside recursive child components vuejs
从vue网站 https://vuejs.org/v2/examples/tree-view.html
您如何将点击的每个ID传递给父级?
How would you transmit on click to the parent each clicked elements id?
推荐答案
对于递归元素,您可以创建事件总线在父母中,将其作为道具传递给孩子,然后让每个道具将其传递给他们产生的任何孩子.
In the case of recursive elements, you can create an event bus in the parent, pass it to the children as a prop, and have each prop pass it to any children they generate.
每个孩子都会在总线上发出事件,而父事件会处理这些事件.我复制了您链接的树状视图练习,并添加了总线功能.
Each child emits events on the bus, and the parent handles them. I copied the tree-view exercise you linked and added the bus functionality.
// 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>
这篇关于VueJs Tree递归元素发出给父对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文