web-dev-qa-db-fra.com

Vue à l'intérieur d'une instance

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é!

javascriptvue.jsvuejs2
10
Robin Löffel

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')}
 } 
});
8
Rhea

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>

4
Kirill Matrosov

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.

0
Avi Waserman
<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>
0
姜振祥