VueJs 树递归元素发送给父级
VueJs Tree recursive elements emits to parent
你如何在递归子组件 vuejs 中发出事件
从 vue 站点获取树示例 https://vuejs.org/v2/examples/tree-view.html
您将如何在点击时将每个点击元素的 ID 传送给父级?
如果是递归元素,可以在parent中创建一个,作为prop传给children,让每个prop传给他们产生的任何 children。
每个 child 在总线上发出事件,然后 parent 处理它们。我复制了您链接的 tree-view 练习并添加了总线功能。
// 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>
如果您不想创建多个 Vue 实例,这是另一个解决方案。我在我的单文件递归组件中使用它。
它使用 v-on
指令(我使用 @
shorthand)。
在你的递归组件中<template>
:
<YourComponent @bus="bus"></YourComponent>
递归组件中methods
:
methods: {
bus: function (data) {
this.$emit('bus', data)
}
}
要启动它,请在 child:
中发出一个事件
this.$emit('bus', {data1: 'somedata', data2: 'somedata'})
该数据将沿链向上传输,然后您在调用递归组件的页面中收到该事件:
methods: {
bus (data) {
// do something with the data
}
}
这里有一个 fiddle 展示了它在 Vue.JS 树示例中的作用。 Right-click 在一个元素上,它将在控制台中输出该模型:
Use v-on="$listeners"
我会让你知道一个小秘密。 Vue $listeners
属性(被记录为将事件向下传递给 children),也将 child 事件传递给 parents!
https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components
这是一个 pseudo-code 示例(shorthand 用于说明目的):
<ancestor-component @messageForAncestor="displayMessage">
...
<parent-component v-on="$listeners">
...
<child-component @click="$emit('messageForAncestor')">
在上面的显示中 child 组件将传递一个事件。 parent 通常能够监听 messageForAncestor
事件,这就是它需要停止的地方,但是。将 v-on="$listeners"
放在 parent 上实际上是说 please pass it on.
警告:这可能是个坏主意
虽然这可能是一个非常糟糕的主意。一个更好的主意是简单地要求中间组件(parent)将其传递给...
<!-- better idea (listen for message and pass on message) -->
<parent-component @message="$emit('message', $event)">
你如何在递归子组件 vuejs 中发出事件
从 vue 站点获取树示例 https://vuejs.org/v2/examples/tree-view.html
您将如何在点击时将每个点击元素的 ID 传送给父级?
如果是递归元素,可以在parent中创建一个
每个 child 在总线上发出事件,然后 parent 处理它们。我复制了您链接的 tree-view 练习并添加了总线功能。
// 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>
如果您不想创建多个 Vue 实例,这是另一个解决方案。我在我的单文件递归组件中使用它。
它使用 v-on
指令(我使用 @
shorthand)。
在你的递归组件中<template>
:
<YourComponent @bus="bus"></YourComponent>
递归组件中methods
:
methods: {
bus: function (data) {
this.$emit('bus', data)
}
}
要启动它,请在 child:
中发出一个事件this.$emit('bus', {data1: 'somedata', data2: 'somedata'})
该数据将沿链向上传输,然后您在调用递归组件的页面中收到该事件:
methods: {
bus (data) {
// do something with the data
}
}
这里有一个 fiddle 展示了它在 Vue.JS 树示例中的作用。 Right-click 在一个元素上,它将在控制台中输出该模型:
Use v-on="$listeners"
我会让你知道一个小秘密。 Vue $listeners
属性(被记录为将事件向下传递给 children),也将 child 事件传递给 parents!
https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components
这是一个 pseudo-code 示例(shorthand 用于说明目的):
<ancestor-component @messageForAncestor="displayMessage">
...
<parent-component v-on="$listeners">
...
<child-component @click="$emit('messageForAncestor')">
在上面的显示中 child 组件将传递一个事件。 parent 通常能够监听 messageForAncestor
事件,这就是它需要停止的地方,但是。将 v-on="$listeners"
放在 parent 上实际上是说 please pass it on.
警告:这可能是个坏主意
虽然这可能是一个非常糟糕的主意。一个更好的主意是简单地要求中间组件(parent)将其传递给...
<!-- better idea (listen for message and pass on message) -->
<parent-component @message="$emit('message', $event)">