Explication détaillée de la liaison des instances d'événements Cpage.js aux composants

Cpage.js est un framework Mvvm léger développé à l'aide de TypeScript (un surensemble de JavaScript). A travers cet article, je partagerai avec vous le code d'implémentation de Cpage.js liant les événements aux composants. Les amis qui en ont besoin peuvent s'y référer

Cpage.js est un framework Mvvm léger qui utilise TypeScript (le super ensemble de JavaScript). ) développement.

Moteur de modèles intégré, routage, instructions, http, dom et autres modules. Il peut facilement réaliser le développement de composants, possède une syntaxe unifiée et est facile à utiliser, ne s'appuie pas sur des frameworks tiers et convient au développement de projets de petite et moyenne taille.

Cpage.js peut non seulement lier des événements à des éléments ordinaires, mais aussi à des composants !

Tout d'abord, nous pouvons définir un en-tête de composant

var header = Cpage.component({
  name: 'header',
  components: [],
  template: `<p>{{header}}--{{height}}</p>`,
  data: {
    header: &#39;this is header&#39;
  },
  props: {
    height: {
      default: &#39;10&#39;
    }
  },
  beforeRender() {
  },
  render() {
  }
});

puis le référencer là où nous devons l'utiliser

<p>
  <p class="main" c-click="handelIf()">my app--templateId</p>
  <p c-if="{{ifTest}}">
    <article></article>
  </p>
   <header 
    height="{{headerHeight}}"
    c-click="headerClick()"
    ></header>
   <article></article> 
  <footer></footer> 
</p>

Vous pouvez utiliser c-event pour lier des événements sur le composant

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!