未知的自定义元素和指令

Posted 2023-02-23

【中文标题】未知的自定义元素和指令

【英文标题】：Unknown custom element and directive

【发布时间】：2019-05-25 17:38:19

【问题描述】：

我（仍在学习 Vue 并且）尝试使用 Vue2 制作一个带有产品选择器（Select2 组件）、一些税收计算（方法）和一些输入格式规则（Inputmask）的动态表。

一切正常，只有混合的子组件和指令没有按预期工作。

我正在使用 Webpack，因此所有组件/指令都已导入。这是JS的入口：

import DecimalMask from './directives/inputmask/decimal-mask';
new Vue(
el: '#vue-app',
components: 
    ....
    'select2-ajax': Select2Ajax,
    'select2-simple': Select2Simple,
    'dynamic-table': DynamicTable,
,
directives: 
    'price-mask': PriceMask,
    'decimal-mask': DecimalMask,
    'date-mask': DateMask,
    ....

);

这里有 DynamicTables 组件。

export default 
    props: 
        tableRows: 
            type: Array,
            default: function() return [] 
        
    ,
    data: function() 
        return 
            rows: this.tableRows
        
    ,
    computed: 
        total: function () 
            var t = 0;
            $.each(this.rows, function (i, e) 
                t += (e.price * e.qty);
            );
            return t;
        
    ,
    methods: 
        addRow: function () 
            try 
                this.rows.push();
             catch (e) 
                console.log(e);
            
        ,
        removeRow: function (index) 
            if(this.rows.length > 1)
                this.rows.splice(index, 1);
        
    
;

这个是内联模板部分

...
<tr v-for="(row, index) in rows">
    <td>
        <select2-ajax
                inline-template
                v-model="row.product_id"
                ajax-source=" AURL::to('common/product-suggestion') ">
            <select name="product[]" class="form-control">
            </select>
        </select2-ajax>
    </td>
    <td>
        <input v-decimal-mask class="form-control" name="qty[]" v-model="row.qty" number/>
    </td>
    <td>
        <input v-decimal-mask.price class="form-control text-right" name="price[]" v-model="row.price" number data-type="currency"/>
    </td>
    <td>
        <input v-decimal-mask.price class="form-control text-right" name="total[]" :value="row.qty * row.price" number readonly />
    </td>
    <td>
        <button type="button" class="btn btn-danger col-md-12" @click="removeRow(index)"><i class="fa fa-times"></i></button>
    </td>
</tr>
...

目前我在 DynamicTables 组件中遇到以下错误：

未知的自定义元素： - 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

无法解析指令：十进制掩码

组件和指令在其他地方都可以完美运行（没有混合在其他组件中），但从我的逻辑来看，它们应该在同一个 Vue 实例中存在/存在时工作。谢谢！

【参考方案1】：

您应该在全球范围内注册它们，以便在您的应用中随处使用它们：

import DecimalMask from './directives/inputmask/decimal-mask';
Vue.directive('decimal-mask',DecimalMask);
....
import customComponent from './Components/customComponent.vue'
Vue.component('custom-component',customComponent);
...
new Vue(...)

【讨论】：

谢谢@Brahim！我误解了 VueJS 文档，它导致了这个错误，但是最好的做法是在全局或本地（直接在组件中）注册，就像我如何让它工作一样：export default props: tableRows: type: Array, default: function() return [] , .... components: 'select2-ajax': Select2Ajax , directives: 'decimal-mask': DecimalMask ; 感谢您的帮助！

如果该组件可以在多个地方使用，请在全局注册，否则在本地注册