Question

我是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警告]：“属性或方法”中我方法中的每个函数 “ component2”未在实例上定义，但在渲染。

因此，我想知道是否允许我们将一个组件放置在另一个组件内，还是应该以其他方式进行。但是，如果我们可以在内部使用多个组件，为什么不能在内部组件中定义一些方法，则data属性可以正常工作，但方法不能正常工作。

对于那些想要阅读原始代码以理解我的问题的人，我将其张贴在这里：（原谅我可怜的英语）

我要解决的麻烦是Vue不会定义另一个组件内部组件中的方法。

相关的HTML代码：

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

main.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” 为什么不起作用。

Answer 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

VueJS在另一个组件内使用组件的麻烦

1 个答案: