VueJS 在另一个组件中使用组件时遇到问题

Posted 2023-02-23

【中文标题】VueJS 在另一个组件中使用组件时遇到问题

【英文标题】：VueJS trouble with using component inside another component

【发布时间】：2019-01-07 17:30:11

【问题描述】：

我是 VueJS 的新手，已经花了大约 30 个小时来学习它。我现在无法在另一个组件中使用组件。我可能需要有人可以帮我解释一下。

在问问题之前，让我先说清楚：

根据 Vue JS 官方网站：

我们不建议初学者从 vue-cli 开始，尤其是如果 您还不熟悉基于 Node.js 的构建工具。

我对 JS-Framework 很陌生，所以我选择下载 Vue.js 并将其绑定到我的 html 文件。

我只有html、js和css

对于那些不了解所有代码的人，我将在这里简化我的问题。因为我认为当某人很有经验时，他/她可能不需要阅读我的愚蠢代码：

基本上我已经定义了两个全局组件，比如说component1 和component2。而在 HTML 中，我使用这样的 component1 来获取多个使用 JSON 数据自动构建的 div：

<div v-for="data in JSON">
    <component1 v-bind:datainfo="data"></component1>
</div>

然后，我在 component1 的模板中使用 component2，如下所示：

template:`
    <div v-for="somedata in JSON">
        <component2 v-bind:datainfo2="data"></component2>
    </div>
`

最后我在component2中定义了一些方法，问题来了。所有这些（component2 中的方法中的函数）都不会被定义，我从 Vue 收到警告说：

[Vue 警告]：Property or method “我的方法中的每个函数在 component2" 未在实例上定义，但在实例中被引用 渲染。

所以我想知道是否允许我们将一个组件放入另一个组件中，或者我应该以其他方式这样做。但是如果我们可以在彼此内部使用多个组件，为什么我们不能在内部组件中定义一些方法，数据属性可以正常工作，但方法不行。

对于那些想阅读原始代码以理解我的问题的人，我将它们发布在这里：（原谅我的英语不好）

我正在处理的问题是另一个组件的内部组件中的方法不会由 Vue 定义。

相关的HTML代码：

<div v-for="(layer, idx) in WMSLayersSource">
    <wms-layer-select-group v-bind:layergroupinfo="layer"></wms-layer-select-group>
</div>

ma​​in.js 文件：

var wmsLayerSelectSingle = Vue.component('wms-layer-select-single', 
props:['singlelayerinfo'], // case-insensitive and don't use '-'
data: function() 
    return 
        opacitySingle: 'display: none',
    
,
method: 
    layerClickSingle: function() 
        if (this.opacitySingle == 'display: block') 
            this.opacitySingle = 'display: none';
         else 
            this.opacitySingle = 'display: block';
        ;
    ,
    test: function() 
        console.log('test');
    
,
template: `
    <li class="singleLayer">
        <input type="checkbox" />
        <span v-on:click="layerClickSingle">
             singlelayerinfo.layers 
        </span>
        <input class="opacity" v-bind:style="opacitySingle" min="0" max="1" step="0.1" value="1.0" type="range">
    </li>
` 
);

var wmsLayerSelectGroup = Vue.component('wms-layer-select-group', 
props: ['layergroupinfo'], // case-insensitive and don't use '-'
data: function() 
    return 
        displaySingle: '',//'display: none',
        opacityGroup: '',
    
,
methods: 
    layerClickGroup: function() 
        console.log('layerClickGroup ');
        if (this.displaySingle == 'display: block') 
            this.displaySingle = 'display: none';
         else 
            this.displaySingle = 'display: block';
        ;
    ,
,
created: function() 
    console.log('Component wms-layer-select-group is created');
    // hide the sublayers of a layer group and show the single layers if they don't belong to a group
    if (this.layergroupinfo.groupName == "singleLayer") 
        this.displaySingle = 'display: block';
     else 
        this.displaySingle = 'display: none';
    
,
template: `
    <div>
        <li class="LayerGroup" v-if="layergroupinfo.groupName != 'singleLayer'">
            <input type="checkbox" />
            <span @click="layerClickGroup">
                <b> layergroupinfo.groupName </b>
            </span>
        </li>
        <div v-for="(singleLayer, idx) in layergroupinfo.layerCollection" v-bind:style="displaySingle">
            <wms-layer-select-single v-bind:singlelayerinfo="singleLayer"></wms-layer-select-single>
        </div>
        <hr/>
    </div>
`
);

我对拼写错误和不区分大小写等问题非常小心，并仔细检查了所有内容。因为我得到的 Vue 警告只是

[Vue 警告]：属性或方法 "layerClickSingle" 未定义 在实例上，但在渲染期间被引用。

其他一切正常。所以我想知道为什么内部组件中的方法 "layerClickSingle" 不起作用。

【参考方案1】：

method: 
layerClickSingle: function() 
    if (this.opacitySingle == 'display: block') 
        this.opacitySingle = 'display: none';
     else 
        this.opacitySingle = 'display: block';
    ;
,
test: function() 
    console.log('test');

,

这应该是methods 而不是method

【讨论】：

天哪……我不知道该说什么。这真的是问题所在。现在一切正常。我怎么能通过双重检查错过它。他妈的。问这样的问题真的很尴尬。但是非常感谢。你救了我。 @Armin Ayari

@MinXIE 很高兴我能帮上忙，别担心这些事情会发生：D

@MinXIE 不用不好意思。像这样的错误发生在我们最好的人身上。不用担心！