</模板><模板 id="员工"><table class="table"><头><tr><th>徽标</th><th>Bedrijfsnaam</th><th>Plats</th></tr></thead>
<tr class="table-row-link" data-href="" v-for="列表中的员工 | 角色选择角色"><td><img class="img-circle-company" src=""/></td><td>@{{employee.role.RoleName }}</td><td>@{{employee.LastName }}</td></tr></tbody></模板><脚本>Vue.config.debug = true;Vue.filter('role',function(value,role){if(!role || 0 === role.length){返回值；}返回值.过滤器(功能(项目){返回 item.role.RoleName == 角色});});Vue.component('searchemployees', {模板:'#searchemployees'});Vue.component('员工', {模板:'#员工'，道具:['列表']，创建(){this.list = JSON.parse(this.list);}});新的 Vue({el:'身体'});在我的 #searchemployees 中，它选择了正确的角色.但是如何在 #employees 中使用它作为我的过滤器?
谢谢
解决方案
您应该能够通过调度事件将属性从组件向上发送到根/全局 Vue 实例.调度事件意味着您正在向 Vue 树中组件的父级发送一条消息，一条包含属性的消息.您可以使用以下语法调度事件:
this.$dispatch('event-name', this.list);
这表示，将 ID 为 event-name 的事件发送到组件的父级，其中包含属性 this.list.
如果您的组件的父级正在侦听 ID 为 event-name 的确切消息，则它只能接收此分派属性.您可以使用以下代码(这在父组件中)从父组件内侦听事件:
事件:{'事件名称':函数(属性){console.log("子组件的属性" + 属性);}}
总的来说，您的代码应如下所示:
Vue.component('员工', {模板:'#员工'，道具:['列表']，创建(){this.list = JSON.parse(this.list);this.$dispatch('发送列表', this.list);}});新的 Vue({el: '身体',数据: {根列表:{}},事件:{发送列表":函数(属性){this.rootlist = 属性；console.log("子组件的属性" + 属性);}}});
这将使您的所有 [list] 数据在您的根 Vue 实例中可用.如果您想将其发送到所有组件，您可以在 send 中创建一个广播事件 this.$broadcast('send-list-down', this.list);-list 函数.$broadcast 和 $dispatch 做的事情完全一样，但是它把数据向下发送到 Vue 树而不是向上发送.只需确保在组件内和 send-list-down 事件中创建事件侦听器即可.
I've got an employee table. Every employee has a role, I'm trying to filter that with radio buttons (for example a radio button admin or superadmin).
How can I use a variable within a component in another component? Right now I've this:
<template id="searchemployees">
<div class="form-group">
<label class="col-md-2 control-label">Filter</label>
<div class="col-md-10">
<div class="radio radio-primary">
<label>
<input type="radio" name="intern" id="intern" value="intern" v-model="selectedrole"/>
Toon alles
</label>
</div>
<div class="radio radio-primary">
<label>
<input type="radio" name="employee" id="employee" value="employee" v-model="selectedrole">
Stagiaire
</label>
</div>
</div>
</div>
</template>
<template id="employees">
<table class="table">
<thead>
<tr>
<th>Logo</th>
<th>Bedrijfsnaam</th>
<th>Plaats</th>
</tr>
</thead>
<tbody>
<tr class="table-row-link" data-href="" v-for="employee in list | role selectedrole">
<td><img class="img-circle-company" src=""/></td>
<td>@{{ employee.role.RoleName }}</td>
<td>@{{ employee.LastName }}</td>
</tr>
</tbody>
</table>
</template>
<script>
Vue.config.debug = true;
Vue.filter('role',function(value,role)
{
if(!role || 0 === role.length)
{
return value;
}
return value.filter(function(item) {
return item.role.RoleName == role
});
});
Vue.component('searchemployees', {
template: '#searchemployees'
});
Vue.component('employees', {
template: '#employees',
props:['list'],
created() {
this.list = JSON.parse(this.list);
}
});
new Vue({
el: 'body'
});
</script>
In my #searchemployeesit takes the right selected role. But how can I use it in #employees for my filter?
Thankyou
解决方案
You should be able to send a property from a component upwards to the root / global Vue instance by dispatching an event. Dispatching an event means you're sending a message, one that contains a property, to a component's parent in the Vue tree. You dispatch an event using the following syntax:
this.$dispatch('event-name', this.list);
This says, send an event with an ID of event-name, containing the property this.list, to the component's parent.
Your component's parent can only receive this dispatched property if it is listening for that exact message with the ID of event-name. You can listen to events from within the parent component using the following code (this goes in parent):
events: {
'event-name': function(property) {
console.log("Property from child component" + property);
}
}
Overall, your code should look something like this:
Vue.component('employees', {
template: '#employees',
props:['list'],
created() {
this.list = JSON.parse(this.list);
this.$dispatch('send-list', this.list);
}
});
new Vue({
el: 'body',
data: {
rootlist: {}
},
events: {
'send-list': function(property) {
this.rootlist = property;
console.log("Property from child component" + property);
}
}
});
This will make all of your [list] data available within your root Vue instance. If you'd like to send it down to all components, you can create a broadcast event this.$broadcast('send-list-down', this.list); within the send-list function. $broadcast does the exact same thing as $dispatch, but it sends the data down the Vue tree instead of up. Just make sure you create event listeners within your components and for the send-list-down event.
这篇关于Vue.js 在另一个组件的组件内使用变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
