Definition 1.

Componentized systems provide an abstraction that can be reused independently and built to replicate large applications, all of which can be abstracted into an abstract tree.

• Advantages: Improve development efficiency, reusable, easy to maintain and debug, easy to cooperate with many people.

2. Communication mode

2.1 Parent-child/Child-parent value

//props
props: { msg: String } / / child pages
<HelloWorld msg="Welcome to Your Vue.js App"/>/ / the parent page

//子父传值 @xx=  $emit
this.$emit('add', info)  / / child pages

<HelloWorld @add="addInfo"/>/ / the parent page
methods: {
    addInfo(info){... }}Copy the code

2.2 Cross-component Event Bus (subscription-publish mode)

// Cross-component event Bus (subscription-publish mode)
class Bus {
    constructor() {
        this.callbacks = {}
    }
    $on(name, fn) {
        this.callbacks[name] = this.callbacks[name] || []
        this.callbacks[name].push(fn)
    }
    $emit(name, args) {
        if (this.callbacks[name]) {
            this.callbacks[name].forEach(cb= > cb(args))
        }
    }
}
// main.js
Vue.prototype.$bus = new Bus()
// child1
this.$bus.$on('foo', handle)/ / to monitor
methods: {
    handle(info){... }}// child2
this.$bus.$emit('foo') / / distributingThe Vue class also implements Bus logic, so it's straightforwardnewA VUE implementation busCopy the code

2.3 Global object state management across component VUEX

Create a unique global data manager Store that manages data and notifies components of state changes.

//src/store/user.js
export default {
  state: { isLogin: false },
  mutations: {
   login(state) {
      state.isLogin = true; }},}/ / introduction
//src/store/index.js
Vue.use(Vuex)
export default new Vuex.Store({
  modules: {
    user
  },
})
//main.js
import store from './store'
new Vue({
  router,
  store,
  render: h= > h(App)
}).$mount('#app')
  
/ / login. Vue calls
<template>
  <button @click="login" v-if=! "" $store.state.isLogin">The login</button> 
</template>

this.$store.commit('login')  
Copy the code

2.4 Sibling Components$parentor$root

// The data is transmitted through the bus of the same father
// brother1
this.$parent.$on('foo', handle)
// brother2
this.$parent.$emit('foo')
Copy the code

Communication between father and son

// Direct access
this.$children[0].xx = 'xxx' //$children cannot guarantee the order of child elements
$ref = $ref ($ref ($ref ($ref ($ref ($ref ($ref)))
Copy the code

2.5$attrs/$listenersEvery DaiChuanCan

Suitable for passing between grandfathers and grandsons, supports methods + attributesCopy the code

• Contains feature bindings (except class and style) that are not identified (and retrieved) in the parent scope as a prop.
• When a component does not declare any prop, all parent scope bindings (except class and style) are included, and internal components can be passed in via vbind=”$attrs” — useful when creating high-level components.

// Grandpa's page
<template>
  <div class="a">
    <h2>The root page</h2>  
    <Child msg="Grandpa's parameters" @some-event="onSomeEvent"></Child>
  </div>
</template>
 methods: {
      onSomeEvent(msg) {
        console.log('Communition:', msg); }},/ / the Child Child pages
<template>
  <div class="b"  @click="$emit('some-event', 'msg from child')">
    <h3>Child pages</h3>
    <! -- $attrs -->
    <p>{{$attrs.msg}}</p>
    <! $attrs --> $attrs -->
    <Grandson v-bind="$attrs" v-on="$listeners"></Grandson>
  </div>
</template>
// inhiertAttrs:false can be used in inhiertAttrs if you don't want to see MSG properties in the final output of the Child HTML
export default {
    inhiertAttrs: false // The default integrated display displays MSG
  }
  
// The Grandson page is getting the MSG and the corresponding some-event
<template>
  <div class="c" @click.stop="$emit('some-event','msg from grandson')">
    <h3>The grandson page</h3>
    <p>{{msg}}</p>
  </div>
</template>
export default {
    props: {
      msg: {
        type: String.default: ' '}},}Copy the code

2.6 Provide/Inject multi-generation values

Values can be passed between ancestors and descendants, only properties are supportedCopy the code

// Root page definition
provide() {
return {foo: 'foo'}}// Insert into the page
inject: ['foo']
Copy the code