苏人！
// index.html <div data-init="component-one"> <...> <div data-init="component-two"> <button @click="doSomething($event)"> </div> </div>
如果我正确理解了一切,这基本上引用了另一个Vue实例中的Vue实例.相应的JS代码分为两个文件,如下所示：
// componentOne.js
new Vue(
el: '[data-init="component-one"]',data: {...},methods: {...}
);
// componentTwo.js
new Vue(
el: '[data-init="component-two"]'
data: {...}
methods: {
doSomething: function(event) {...}
}
);
现在,问题是,来自componentTwo的doSomething永远不会被调用.
但是当我做一些内联的东西,比如{{3 3}}时,它会像它应该的那样计算.所以Vue知道有什么东西.它还会在页面加载时删除@click元素.
我也尝试使用内联模板,但它并没有像我期望的那样在这种情况下工作.而且我认为它不适用于这种情况,所以我再次放弃了它.
这里的正确方法是什么？我怎样才能使这项工作成为现在最简单的方法？
我们使用的Vue版本是2.1.8.
干杯!
解决方法
问题是你有两个相互嵌套的vue实例.
如果元素是嵌套的,那么您应该使用相同的实例或尝试组件
如果元素是嵌套的,那么您应该使用相同的实例或尝试组件
https://jsfiddle.net/p16y2g16/1/
// componentTwo.js
var item = Vue.component('item',({
name:'item',template:'<button @click="doSomething($event)">{{ message2 }} </button>',data: function(){
return{
message2: 'ddddddddddd!'
}},methods: {
doSomething: function(event) {alert('s')}
}
}));
var app = new Vue({
el: '[data-init="component-one"]',data: {
message: 'Hello Vue!'
}
});
<div data-init="component-one">
<button >{{ message }}</button>
<item></item>
</div>
如果sepatate实例彼此独立,则它们可以正常工作.
如下：
https://jsfiddle.net/p16y2g16/
var app = new Vue({
el: '[data-init="component-one"]',data: {
message: 'Hello Vue!'
}
});
// componentTwo.js
var ddd = new Vue({
el: '[data-init="component-two"]',data: {
message: 'ddddddddddd!'
},methods: {
doSomething: function(event) {alert('s')}
}
});
