méthodes mères d'accès du modèle composant vuejs

Je possède ce code:méthodes mères d'accès du modèle composant vuejs

 new Vue({ 
     el: '#app', 
     components: { 
      'app-component': AppComponent 
     }, 
     data: { 
      message: 'Hello Vue.js!' 
     }, 
     methods: { 
      doSomething: function(){ 
       console.log('arrived!') 
      } 
     } 
    })

Comment puis-je appeler la méthode « doSomething » à partir du modèle AppComponent html? comme ceci:

<app-component> 
    <a href="#" v-on:click="doSomething()">text</a> 
</app-component>

Je reçois cette erreur:

Uncaught TypeError: scope.doSomething is not a function

Source

2016-05-14 saeedhbi

essayer 'v sur: click = "doSomething"' – maioman

@maioman Je suis arrivé ceci: [Vue warn]: v sur: click = "doSomething" attend une valeur de fonction, se est définie (trouvé dans le composant : ) – saeedhbi

Vous pouvez utiliser l'expédition de $ de l'enfant pour déclencher un événement. Exemple:

// App component 
<app-component> 
    <a href="#" v-on:click.prevent="$dispatch('do-something')">text</a> 
</app-component> 


// Parent 
new Vue({ 
    el: '#app', 
    components: { 
     'app-component': AppComponent 
    }, 
    data: { 
     message: 'Hello Vue.js!' 
    }, 
    events: { 
     'do-something': function(){ 
      console.log('arrived!') 
     } 
    } 
});

Pour plus d'informations sur la communication parent-enfant, consultez la documentation: http://vuejs.org/guide/components.html#Parent-Child-Communication

Source

2016-05-14 11:28:16 Wiljan

Y a-t-il une solution sans événements? comme exemple de prototypage Vue ou etc. – saeedhbi

@saeedhbi J'essayais de réaliser quelque chose de similaire à vous, c'est-à-dire mettre toutes les méthodes partagées/communes dans un composant de base, puis étendre le composant de base pour créer de nouveaux composants. L'utilisation de mixins ou d'un plugin personnalisé semble être une solution plus élégante. J'utilise actuellement l'approche mixin, dans laquelle j'ai toutes les méthodes partagées dans un mixin et chaque fois qu'un composant nécessite ces méthodes partagées, j'utilise le mixin dans ce composant. Les Mixins dans Vue sont comme "trait en php". J'espère que cela aide. – Donkarnash

Off cause, mixins est la réponse! Je vous remercie! – pilat

En plus de réponse Wiljan, je tiens à tous les composants avec nouvelle instance Vue qui a des méthodes et des données. Maintenant, j'accès aux méthodes et etc.

Source

2016-05-14 14:36:17 saeedhbi

Pouvez-vous développer cela? Je ne suis pas sûr, mais cela ressemble à quelque chose que l'on ne devrait certainement pas faire ... –

@LinusBorg Je ne veux pas partager des méthodes avec des accessoires ou des événements et ces méthodes et données sont globales comme l'utilisateur ou l'entreprise et doivent être partagées sur l'application même des composants. Et je ne veux pas les utiliser avec $ parent ou $ dispatch ou etc. Sur chaque composant j'utilise la propriété "extends" pour l'obtenir et l'utiliser. Maintenant, j'accède au nom de la méthode dans le modèle de composant. Je sais que les composants sont des isoles et il vaut mieux les isoler, mais je pense que cela ne dérange rien. – saeedhbi

essayer v-on:click="$parent.doSomething()"

Source

2016-05-15 06:42:24

Vous pouvez utiliser, basé sur this answer.

this.$parent.$options.methods.someParentMethod(data)

Source

2016-10-01 08:46:38 Saman

méthodes mères d'accès du modèle composant vuejs

Répondre

Questions connexes