Gens sup!
J'ai ce code HTML ici:
// index.html
<div data-init="component-one">
<...>
<div data-init="component-two">
<button @click="doSomething($event)">
</div>
</div>
Cela fait essentiellement référence à une instance de Vue dans une autre instance de Vue si j'ai tout compris correctement. Le code JS correspondant est divisé en deux fichiers et ressemble à ceci:
// 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) {...}
}
);
Le problème, c’est que doSomething
de componentTwo
n’est jamais appelé.
Mais lorsque je fais des choses en ligne, comme {{ 3 + 3 }}
, elles sont calculées comme il se doit. Donc, Vue sait qu'il y a quelque chose. Et cela supprime également l'élément @click
lors du chargement de la page.
J'ai également essayé de manipuler inline-template
également, mais cela ne fonctionne pas vraiment comme je le pensais dans cette situation. Et j’ai pensé que ce n’était pas destiné à cette affaire de toute façon, alors je l’ai encore laissé tomber.
Quelle serait la bonne approche ici? Et comment puis-je faire en sorte que cela fonctionne de la manière la plus simple possible avec la configuration actuelle?
La version de Vue que nous utilisons est 2.1.8
.
À votre santé!
Le problème est que vous avez deux instances de vue imbriquées l'une dans l'autre . Si les éléments sont imbriqués, utilisez la même instance ou essayez components
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>
les instances sepatate fonctionnent si elles sont indépendantes les unes des autres.
comme suit:
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')}
}
});
Mais lorsque je fais des choses en ligne, comme {{3 + 3}}}, elles sont calculées comme il se doit. Donc, Vue sait qu'il y a quelque chose.
Parce que vous avez l'instance parent 'composantOne'. Il a activé Vue pour ce modèle. Si vous devez définir une autre instance à l'intérieur, vous devez séparer une partie du modèle. Exemple (il peut y avoir un décalage dans l'extrait de code!) . Alternative
https://jsfiddle.net/qh8a8ebg/2/
// componentOne.js
new Vue({
el: '[data-init="component-one"]',
data: {
text: 'first'
},
methods: {}
});
// componentTwo.js
new Vue({
el: '[data-init="component-two"]',
data: {
text: 'second'
},
template: `<button @click="doSomething($event)">{{text}}</button>`,
methods: {
doSomething: function(event) {
console.log(event);
}
}
});
<script src="https://vuejs.org/js/vue.min.js"></script>
<div data-init="component-one">
{{text}}
</div>
<div data-init="component-two">
</div>
L'élément de bouton à l'intérieur du deuxième composant est référencé comme un emplacement dans Vue. L'évaluation de la valeur de la directive @click a lieu dans le composant parent (composant-one, composant hôte-deux). Par conséquent, vous devez déclarer le gestionnaire de clics sur celui-ci (sur le composant-un).
Si vous souhaitez que le gestionnaire soit géré à l'intérieur du deuxième composant, vous devez déclarer une directive click pour l'élément slot dans son modèle (composant-deux) et transmettre la fonction de gestionnaire, par exemple, comme un pop.
bonne chance.
<div th:if="${msg.replyFloor}">
<div class="msg-lists-item-left">
<span class="msg-left-edit"
th:classappend=" ${msg.unreadCount == 0} ? 'msg-all-read' ">您在</span>
<span th:text="${msg.topic.title}"
class="msg-left-edit-res"
th:classappend=" ${msg.unreadCount == 0} ? 'msg-all-read' ">问题回答</span>
<span th:text="${msg.type.name}"
class="msg-left-edit "
th:classappend=" ${msg.unreadCount == 0} ? 'msg-all-read' ">帖子相关</span>
<span class="msg-left-edit-number" >
产生了<span th:text="${msg.unreadCount} ? : ${msg.unreadCount} + '条新' : ${msg.unreadCount} + '条' "
th:class="${msg.unreadCount} ? : 'number-inner':''">2132条</span>回复
</span>
</div>
<div class="msg-lists-item-right">
<span th:text="${msg.lastShowTime}">2017-8-10</span>
</div>
</div>