如何解决Vue-使用Vue.componet或Async组件更改根组件
我想要一个动态/异步组件,该组件将根据菜单单击来加载。将会有很多链接和组件。
我的问题是:
- 即使我使用Vue.Component在全球范围内注册,也无法找到测试组件
- 可以更改根目录中的component1吗?如果可能,我将使用Ajax调用组件文件。
谢谢。
Index.html
<script src="~/bundle/site.js"></script>
<div id="app">
<input type="button" v-on:click="changeComponent('test-component')" value="Click me"/>
<component v-bind:is="view"></component>
</div>
site.js
import Vue from 'vue';
import axios from 'axios';
global.Vue = Vue;
global.axios = axios;
var vm = new Vue({
el: '#app',data: {
view: 'component1'
},components: {
'component1': {
template: '<div>Dynamic Component master</div>'
}
},methods: {
changeComponent: function (parComp) {
this.component1 = parComp;
},}
});
Vue.component('test-component',{
template: '<div v-on:click = "changeName()"><h1>{{msg}}</h1></div>',data: function () {
return {
msg: "Test Componet"
}
},methods: {
changeName: function () {
this.msg = "mouse clicked";
},}
})
更新
- 将vm = new Vue()....更改为global.vm = new Vue().....
- 致电vm.changeComponent('test-component')
现在可以使用。
Vue.options.components [“ test-component”]可以访问它。
但是test-component
不能以html格式访问:
<test-component></test-component>
解决方法
问题通过以下方式解决:
- 将vm = new Vue()....更改为global.vm = new Vue().....
- 在新的Vue()之前声明Vue.component('test-component'....
谢谢 威尔逊
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。