Vue.js 在另一个组件中的一个组件中使用变量

Posted 2023-02-22

【中文标题】Vue.js 在另一个组件中的一个组件中使用变量

【英文标题】：Vue.js use variable within a component in another component

【发布时间】：2016-06-14 02:56:10

【问题描述】：

我有一张员工表。每个员工都有一个角色，我正在尝试使用单选按钮（例如单选按钮管理员或超级管理员）对其进行过滤。

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

   <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 中使用它作为我的过滤器？

谢谢

【问题讨论】：

你想在你的组件之间传递什么变量？我假设它是props:['list'] ?

@10000RubyPools 实际上我希望列表项是全局的，这样我就可以从任何组件访问它。

【参考方案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);
        
    
);

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

【讨论】：

谢谢！你解释得很好。