Coding With Fun
Home Docker Django Node.js Articles FAQ

Vue .js componentized


May 29, 2021 Article blog



In this organization's complex interface problem, Vue and React can be said to be very much the same: everything is a component. We can make any example into a component.

var Example = Vue.extend({
  template: '<div>{{ message }}</div>',
  data: function () {
    return {
      message: 'Hello Vue.js!'
    }
  }
})
 
// 将该组件注册为 <example> 标签
Vue.component('example', Example)

By componentizing, we can use it in other component templates:

<example></example>

Components can also set up other components and eventually form a tree structure representing the UI view, and for effective dynamic composition between components, Vue can:

  • Use props to define how external data is received and the type of data
  • Use custom events to deliver messages externally;
  • Use API to combine external dynamically incoming content with its own templates.

That's all the Vue .js componentization that the editor brings you.