JianghuJS - Component-Based Development and Communication

12002

1. Features

JianghuJS uses Vue.js as the primary front-end framework, leveraging the component-based development capabilities provided by Vue.js to build front-end applications. Vue.js is a modern JavaScript framework focused on building user interfaces, with the core idea of component-based development, making front-end code easier to maintain and extend.

In Vue.js, a component is typically composed of a Vue instance, which has its own template, styles, and logic. This component-based development approach allows front-end code to be divided into smaller functional blocks, each of which can be developed and tested independently. Vue.js provides mechanisms for communication between components, state management, and other functionalities, enabling the entire front-end application to be organically organized together.

• Why Component-Based Development

  In JianghuJS, component-based development is significant for the following reasons:

  • Modular Design: Each component is designed as a relatively independent and reusable module, which helps modularize the code, improving maintainability and reusability.

  • Decoupling: Components communicate through clearly defined interfaces, achieving decoupling between components. Each component focuses only on its own business logic and does not depend on the internal implementation details of other components.

  • Team Collaboration: Each component can be managed by different teams or developers, enabling independent module development through clear interfaces and specifications, which enhances team collaboration efficiency.

  • Maintainability: Components are developed and maintained independently, so when the system needs updates or fixes, only the specific component's code needs to be addressed, reducing the impact scope and improving code maintainability.

  • Rapid Development: Componentization allows for quick application setup by combining existing components rather than developing each feature from scratch, accelerating the development process.

• Advantages of Component-Based Development

  • Code Reusability: Vue.js components can be reused multiple times, increasing code reuse rates. Dividing the page into multiple components allows different components to handle different logic, making the code more readable and easier to maintain and upgrade.

  • Component-Based Philosophy: Vue.js adopts a component-based philosophy. Breaking a large application into multiple smaller components allows different components to operate without interference, facilitating development and upgrades. This design also enhances code reusability, maintainability, and scalability.

  • Data Passing: Vue.js uses a unidirectional data flow approach, passing data from parent components to child components or passing data from child components back to parent components. This data flow method clarifies and controls the state between components, avoiding data confusion and errors.

  • View Control: Components in Vue.js can contain their own internal state and logic to encapsulate interactions and processing behaviors on the view. This design allows developers to focus on component design and UI implementation without concerning themselves with other parts of the system.

JianghuJS utilizes the component-based development capabilities of Vue.js to define various business components, constructing a flexible and extensible front-end framework. This framework can adapt to the needs of different projects while providing a consistent development style and standards, contributing to improved development efficiency and code maintainability.

2. Communication Methods

• Parent-Child Component Communication

This can be achieved by passing props data from the parent component to the child component, where the child component receives the data through props. Additionally, the child component can pass data back to the parent component using methods such as custom events and the emit/on methods, or using callback functions.

// Parent Component
<template>
  <div>
    <child :msg="parentMsg"/>
  </div>
</template>
<script>
import Child from './Child.vue'

export default {
  name: 'Parent',
  components: { Child },
  data () {
    return {
      parentMsg: 'Hello'
    }
  }
}
</script>

// Child Component
<template>
  <div>{{msg}}, Child Component</div>
</template>

<script>
export default {
  name: 'Child',
  props: {
    msg: String
  }
}
</script>

Receiving data: The child component receives data from the parent component through props.

// Child Component
<template>
  <div>{{msg}}, Child Component</div>
</template>

<script>
export default {
  name: 'Child',
  props: {
    msg: String
  }
}
</script>

• Sibling Component Communication

Sibling components can communicate through the parent component as an intermediary by passing data to the parent component, which then passes the data to another child component that needs to communicate. Additionally, global state management tools provided by Vue.js, such as EventBus and Vuex, can also be used for component communication.

EventBus communication:

// EventBus.js

import Vue from 'vue'

export default new Vue()

// ComponentA.vue

<template>
  <div>
    <h2>Component A</h2>
    <button @click="onClick">Send Data</button>
  </div>
</template>

<script>
import EventBus from '@/utils/EventBus'

export default {
  name: 'ComponentA',
  methods: {
    onClick () {
      EventBus.$emit('event-name', 'Component A sends data')
    }
  }
}
</script>

// ComponentB.vue

<template>
  <div>
    <h2>Component B</h2>
    <div>{{msg}}</div>
  </div>
</template>

<script>
import EventBus from '@/utils/EventBus'

export default {
  name: 'ComponentB',
  data () {
    return {
      msg: ''
    }
  },
  mounted () {
    EventBus.$on('event-name', data => {
      this.msg = data
    })
  }
}
</script>

• Cross-Level Component Communication

The provide/inject API can be used to pass data downwards. The injected component can receive data through the inject property. After specifying a key name in the injected property, the injected component can access this property using the same key name.

// Ancestor Component
<template>
  <div>
    <parent-component />
  </div>
</template>

<script>
import ParentComponent from './ParentComponent.vue'

export default {
  name: 'AncestorComponent',
  components: { ParentComponent },
  provide () {
    return {
      ancestorMsg: 'I am ancestor component!'
    }
  }
}
</script>

// Parent Component
<template>
  <div>
    <child-component />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  name: 'ParentComponent',
  components: { ChildComponent }
}
</script>

// Child Component
<template>
  <div>
    {{injectMsg}}, ChildComponent
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  inject: ['ancestorMsg'],
  data () {
    return {
      injectMsg: this.ancestorMsg
    }
  }
}
</script>