Vue components

Communication mode

Parent and son: props $children Refs

<! -- 1, props --> // child props: {MSG: String} // parent <HelloWorld MSG ="Welcome to Your Vue.js App"/>

Copy the code
<! - 2,$children -->
 // parent
this.$children[0].xx = 'xxx'
 
Copy the code
<! - 3,$refs -->
// parent
<HelloWorld ref="hw"/>
mounted() {
  this.$refs.hw.xx = 'xxx'
}
Copy the code

Parent: Custom event

// child
this.$emit('add', good)
// parent
<Cart @add="cartAdd($event)"></Cart>
Copy the code

Arbitrary component: event bus VUEX

<! - 1.$bus--> // Bus: event dispatcher, listener and callback management 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)
// child2
this.$bus.$emit('foo')
Copy the code

Bus implements Vueemit

Sibling components:$parent $root

// brother1
this.$parent.$on('foo', handle)
// brother2
this.$parent.$emit('foo')
Copy the code

Provide/Inject cross-component communication

// ancestor
provide() {
    return {foo: 'foo'}
}
// descendant
inject: ['foo'] <! --> inject: {bar1: {from:'bar',
        default: 'barrrrrrrr'}},Copy the code

The characteristics of prop$attrs/$listeners

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

// child: not declared MSG <p v-bind= in props"$attrs" v-on="$listeners"></p>

// parent
<Child msg="msg from grandpa"
      @foo="onFoo"></Child>
Copy the code

slot

  • Anonymous slot
  • A named slot
  • Scope slot

The component creates the Vue.component vue.extend template

  • Vue.com Ponent Global registration cn.vuejs.org/v2/api/#Vue…

  • Vue. Extend belongs to the global API of Vue, which is seldom used in actual business development, because the procedure of using extend is more complicated than that of Vue.component. But in some standalone component development scenarios, the vue.extend + $mount pair is the one we need to focus on. Cn.vuejs.org/v2/api/#Vue…

To implement an alert component like window.alert(), call it like a JS function.

<! -- implement --> <! -- utils code --> import Vue from'vue'// Pass in a component configuration // create an instance of it and mount it to the body // return the component instanceexport default functionCreate (Component, props) {//Component: passed in //props: Const Ctor = vue.extend (Component) const comp = new Ctor() object.keys (props).foreach (item=>{item [item] = props[item] }) const vm = comp.$mount()
    document.body.appendChild(vm.$el) vm.remove = ()=>{ <! - instance on mount other methods -- > document. Body. RemoveChild (vm.$el)
        vm.$destroy()}returnVm // extend 2 const Ctor = vue. extend(Component) const comp = new Ctor({propsData:props}) console.log(comp) const vm =  comp.$mount()
    document.body.appendChild(vm.$el) vm.remove = ()=>{ <! - instance on mount other methods -- > document. Body. RemoveChild (vm.$el)
        vm.$destroy()}return vm
}


Copy the code
  • template

v-modal

V – model is a directive, limit in the input, textarea, select and use of the components

The. Lazy modifiers (instead of input listening for the change event) and. Number modifiers (the input string is converted to a valid number) are syntactic sugar

Vue common instance methods

$destroy, $watch, $forceUpdate()

  • $mount() : mount, (vue scope)
<! Mount the vue instance to the# on the app - >
let vm = new Vue({
   data:{
       message:"Zhang"}}).$mount("#app") <! Append the vue instance inside the body (usually used for components that require JS calls) -->let vm = new Vue({
   data:{
       message:"Zhang"}}).$mount() // change vDOM to DOM // vm.$elThere are generated on a dom document. The body. The appendChild (vm.$el)
Copy the code
  • $destroy() : manually destroy
  • $watch () to monitor
  • $forceUpdate() enforces the new