Common components pass value vue

I. pass data using Props

 

Use son within parent components in

<template>
 <div>
  Parent components: {{mny}}
  <Son1 :mny="mny"></Son1>
 </div>
</template>
<script>
import Son1 from "./Son1";
export default {
 components: {
  Son1
 },
 data() {
  return { mny: 100 };
 }
};
</script>

 

Subassemblies to accept the parent component properties

 

 

II. Use $ emit use

Parent component subassembly trigger method, the callback is transmitted by way of the modified content to the parent component

<template>
 <div>
  Parent components: {{mny}}
  <Son1 :mny="mny" @input="change"></Son1>
 </div>
</template>
<script>
import Son1 from "./Son1";
export default {
 methods: {
  change(mny) {
   this.mny = mny;
  }
 },
 components: {
  Son1
 },
 data() {
  return { mny: 100 };
 }
};
</script>

 

Subassemblies trigger method to bind himself

<template>
 <div>
  Subassembly 1: {{mny}}
  <button @click="$emit('input',200)">更改</button>
 </div>
</template>
<script>
export default {
 props: {
  mny: {
   type: Number
  }
 }
};
</script>

 

The main purpose here is data synchronization father and components -> syntactic sugar wording

.sync #
 < SON1 : mny.sync = "MNY" > </ SON1 > 
<-! event name update :( binding .sync name of the property triggered) -> 
< the Button @click = "$ EMIT ( ' Update: MNY ', 200 is) " > change </ Button >

#-In model
<Son1 v-model="mny"></Son1>
<template>
 <div>
  Subassembly 1: {{value}} // trigger event can only be input
  <button @click="$emit('input',200)">更改</button>
 </div>
</template>
<script>
export default {
 props: {
  value: { // received attribute name can only be called value 
   of the type: Number The
  }
 }
};
</script>

 

三.$parent、$children

Continue to transfer property

<Grandson1 :value="value"></Grandson1>
<template>
 <div>
  Grandchild: {{value}}
  <! - to call the parent component of the input event -> 
  < the Button @click =. "$ Parent $ EMIT ( 'input', 200)" > Change </ the Button > 
 </ div > 
</ Template > 
< Script > 
Export default {
 props: {
  value: {
   type: Number
  }
 }
};
</script>

 

If then there is a deep level of $ parent. $ Parent ..... we can package a $ dispatch method dispatch up

#$dispatch
Vue.prototype.$dispatch = function $dispatch(eventName, data) {
  let parent = this.$parent;
  while (parent) {
    parent.$emit(eventName, data);
    parent = parent.$parent;
  }
};


Since it can distribute up that can also be distributed down

#$broadcast
Vue.prototype.$broadcast = function $broadcast(eventName, data) {
  const broadcast = function () {
    this.$children.forEach((child) => {
      child.$emit(eventName, data);
      if (child.$children) {
        $broadcast.call(child, eventName, data);
      }
    });
  };
  broadcast.call(this, eventName, data);
};

 

四.$attrs、$listeners

#$attrs

Batch passed down property

<Son2 name="jack" age="10"></Son2>

<! - can $ attrs attribute son2 component may continue to be passed down property -> 
< div >
  Son 2: {{$ attrs.name}}
  <Grandson2 v-bind="$attrs"></Grandson2>
</div>


<template>
 <div>孙子:{{$attrs}}</div>
</template>

#$listeners

Batch passed down method

< Son2 name = "Jack" Age = "10" @click = "() => {} this.mny = 500" > </ Son2 > 
<-! Can be used in the listeners properties son2 assembly, the method may continue passed down -> 
< Grandson2 V the bind- = "$ attrs" V-ON = "$ the Listeners" > </ Grandson2 >

<button @click="$listeners.click()">更改</button>

 

 

五.Provide & Inject

#Provide
Injection data in the parent

provide() {
  return { parentMsg: "父亲" };
},

#Inject
In any subassembly may be injected parent data

Inject: [ "parentMsg"] // will be mounted on the current data instance

 

 

Six .Ref use

Acquisition component instance

<Grandson2 v-bind="$attrs" v-on="$listeners" ref="grand2"></Grandson2>
Mounted () { // get property assembly defined 
  the console.log ( the this $ refs.grand2.name.);
}

 

 

Seven .EventBus

For cross-component notice (not complex projects can be used in this way)

Vue.prototype $ bus. = New View ();

Son2 components communicate with each other and Grandson1

 mounted() {
  this.$bus.$on("my", data => {
   console.log(data);
  });
 },

mounted() {
  this.$nextTick(() => {
   this.$bus.$emit("my", "我是Grandson1");
  });
 },