Javascript VueJS在另一个组件内使用组件时出现问题
我是VueJS新手,已经花了大约30个小时学习它。我现在在另一个组件中使用组件时遇到问题。我可能需要有人帮我解释一下 在提问之前,让我澄清一点:Javascript VueJS在另一个组件内使用组件时出现问题,javascript,vue.js,vuejs2,Javascript,Vue.js,Vuejs2,我是VueJS新手,已经花了大约30个小时学习它。我现在在另一个组件中使用组件时遇到问题。我可能需要有人帮我解释一下 在提问之前,让我澄清一点: 根据Vue JS办公网站: 我们不建议初学者从vue cli开始,尤其是在 您还不熟悉基于Node.js的构建工具 我对JS框架非常陌生,所以我选择下载Vue.JS并将其绑定到我的HTML文件 我只有html、js和css 对于那些不知道如何通读所有代码的人,我将在这里简化我的问题。因为我认为当某人非常有经验时,他/她可能不需要阅读我的愚蠢代码: &l
<div v-for="(layer, idx) in WMSLayersSource">
<wms-layer-select-group v-bind:layergroupinfo="layer"></wms-layer-select-group>
</div>
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>
`
});
基本上我定义了两个全局组件,比如component1和component2。在HTML中,我使用像这样的组件1自动生成多个div,其中包含JSON数据:
<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 warn]:属性或方法“中我的方法中的每个函数”
component2“未在实例上定义,但在
渲染
所以我想知道我们是否可以把一个组件放在另一个组件中,或者我应该用另一种方式来做。但是如果我们可以在彼此内部使用多个组件,为什么我们不能在内部组件中定义一些方法呢?数据属性可以正常工作,但方法不行
对于那些想阅读原始代码以理解我的问题的人,我将在这里发布它们:(请原谅我的糟糕英语)
我要处理的问题是另一个组件的内部组件中的方法不会由Vue定义
相关HTML代码:
<div v-for="(layer, idx) in WMSLayersSource">
<wms-layer-select-group v-bind:layergroupinfo="layer"></wms-layer-select-group>
</div>
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>
`
});
main.js文件:
<div v-for="(layer, idx) in WMSLayersSource">
<wms-layer-select-group v-bind:layergroupinfo="layer"></wms-layer-select-group>
</div>
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>
`
});
var wmsLayerSelectSingle=Vue.component('wms-layer-select-single'{
道具:['singlelayerinfo',//不区分大小写,不使用“-”
数据:函数(){
返回{
opacitySingle:“显示:无”,
}
},
方法:{
layerClickSingle:function(){
如果(this.opacitySingle=='display:block'){
this.opacitySingle='display:none';
}否则{
this.opacitySingle='display:block';
};
},
测试:函数(){
console.log('test');
}
},
模板:`
{{singlelayerinfo.layers}
`
});
var wmsLayerSelectGroup=Vue.component('wms-layer-select-group'{
props:['layergroupinfo'],//不区分大小写,不使用“-”
数据:函数(){
返回{
displaySingle:“,/”显示:无“,
不透明组:“”,
}
},
方法:{
layerClickGroup:函数(){
log('layerClickGroup');
if(this.displaysingsingle=='display:block'){
this.displaySingle='display:none';
}否则{
this.displaySingle='display:block';
};
},
},
已创建:函数(){
log('组件wms层选择组已创建');
//隐藏图层组的子图层,如果不属于某个组,则显示单个图层
如果(this.layergroupinfo.groupName==“singleLayer”){
this.displaySingle='display:block';
}否则{
this.displaySingle='display:none';
}
},
模板:`
{{layergroupinfo.groupName}}
`
});
我对打字错误、不区分大小写等问题非常小心,并仔细检查了所有内容。因为我收到的Vue警告只是
[Vue warn]:未定义属性或方法“layerClickSingle”
在实例上,但在渲染期间被引用
其他一切都很好。因此,我想知道为什么内部组件中的方法“layerClickSingle”不起作用
method: {
layerClickSingle: function() {
if (this.opacitySingle == 'display: block') {
this.opacitySingle = 'display: none';
} else {
this.opacitySingle = 'display: block';
};
},
test: function() {
console.log('test');
}
},
这应该是
方法
而不是方法
哦,我的天啊……我不知道该说什么。这才是真正的问题。现在一切正常。我怎么会因为重复检查而错过呢。该死的。问这样的问题真的很麻烦。但是非常感谢你。你救了我@阿明Ayari@MinXIE很高兴我能帮上忙,别担心这些事情会发生:D@MinXIE没必要感到尴尬。像这样的错误发生在我们最好的人身上。别担心!