Question

我有一张员工桌。每个员工都有一个角色，我试图用单选按钮过滤它（例如单选按钮admin或superadmin）。

如何在另一个组件的组件中使用变量？现在我就是这个：

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

在我的#searchemployees中，它需要正确的选定角色。但是如何在#employees中为我的过滤器使用它？

三江源

Answer 1

您应该能够通过调度事件将组件向上发送到根/全局Vue实例。调度事件意味着您正在向Vue树中的组件父级发送包含属性的消息。您使用以下语法分派事件：

this.$dispatch('event-name', this.list);

这就是说，向组件的父级发送ID为event-name且包含属性this.list的事件。

如果组件的父级正在侦听ID为event-name的确切消息，则该组件的父级只能接收此已分派的属性。您可以使用以下代码从父组件中侦听事件（这在父级中）：

events: {
    'event-name': function(property) {
        console.log("Property from child component" + property);
    }
}

总的来说，您的代码应如下所示：

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

这将使您的根Vue实例中的所有[list]数据可用。如果您要将其发送到所有组件，则可以在this.$broadcast('send-list-down', this.list);功能中创建广播事件send-list。 $broadcast与$dispatch完全相同，但它会将数据发送到Vue树而不是向上。只需确保在组件和send-list-down事件中创建事件侦听器。

Vue.js在另一个组件

1 个答案: