The introduction

The two main features of VUE are the responsive principle and the component system, and today we will take a look at how the components at each level of the component system transfer data.

The rest of the presentation was conducted in the following network:

Father
Son
Daughter
Son
Father
GrandSonBySon
GrandDaughterBySon
Daughter
Father
GrandSonByDau
Daughter
Son
Father

Use prop and $emit to emit

The parent component passes values to the child component through sonValue and dauValue of prop exposed by the child component.

// Parent <template> <div class="father">
    <son v-bind:sonValue="son"></son>
    <daughter v-bind:dauValue="daughter"></daughter>
  </div>
</template>
<script>
import Daughter from '@/views/Daughter.vue'
import Son from '@/views/Son.vue'
export default {
  components: {
    Daughter,
    Son
  },
  data () {
    return {
       son:'son',
       daughter:'daughter'
    }
  }
}
</script>
Copy the code

The child component receives the value of the parent component through its internally defined props. Whenever the value of the parent component changes, the internal value of the child component changes and can be referenced using this.[props].

// Child <template> <div class="father"> {{sonValue}} <! -- son --> </div> </template> <script>export default {
  props:{
    sonValue:{
      type:String,
      default:""}},data () {
    return{}},mounted(){console.log(this.sonvalue) // The value entered by the parent component'son'
  }
}
</script>
Copy the code

When a child passes a value to its parent, it simply fires an event and returns it to the parent via event passing.

// Trigger this in the child component.$emit('Event name'.'value')
Copy the code
// The parent component binds the event back to the parent instance's function. The first argument is the child component's pass value. <son v-bind:sonValue="son" @changeFather="change"></son> methods:{change(value){this.fromson = value}}Copy the code

Note: Vue one-way data flow causes all prop to form a one-way down binding between their parent prop and the parent prop. Updates to the parent prop flow down to the child component, but not the other way around. This prevents accidental changes in the state of the parent component from the child, which can make the data flow of your application difficult to understand. Additionally, every time the parent component is updated, all prop in the child component will be refreshed to the latest value. This means that you should not change a prop inside a child component. If you do, Vue will issue a warning in the browser console.

// Changes to the child component sondata () {
    return{// Initializes a value inside a child component, assigning the value passed in. realSonValue:this.sonValue } },Copy the code

Second,vm.$ref.[child]andvm.$parent(Display calls between parent and child components)

Vm. $ref.[child] introduces the child component in the parent component and sets the ref value of the child component. ref=”son”

// Parent <template> <div class="father">
    <son v-bind:sonValue="son" @changeFather="change" ref="son"></son>
    {{fromSon}}
    <daughter v-bind:dauValue="daughter"></daughter> </div> </template> // Parent components can be referenced'ref'To obtain.mounted(){
    console.log(this.$refs.son.innerValue) // '$refs.son'
    this.$refs.son.innerFun() // 'I am Son'
}
Copy the code

A value, or method, defined internally by a child component.

data () {
    return{// Initialize a subcomponent innerValue:'$refs.son'
    }
},
methods:{
    innerFun(){
      console.log('I am Son')}},Copy the code

Vm.$parent introduces the parent component instance into the child component

/ / the parent componentdata () {
    return {
       innerFather:'vm.$parent'}},Copy the code
/ / child componentmounted(){
    console.log(this.$parentInnerFather) / /'vm.$parent'
}
Copy the code

Note: $child = vm; $child = vm; $child = vm; $child = vm; $child = vm; Cannot locate the value of the child component you want, but each child component has only one parent component this is fixed.

3. Bus Mechanism (between sibling components)

$EMIT via vM. $emit and Vm. $ON via vM. $EMIT triggers events on the current instance and passes parameters to listeners that listen for custom events on the current instance via VM. $ON.

When the two components need to transmit data, the initiator triggers a VM. $emit on the platform and then passes parameters. The receiver sets a listener vm.$ON on the platform to receive parameters and execute methods. The arguments to the method are those passed by the sender.

Define a hosting platform for your vUE project, which you can introduce as a single file in various sibling components, or as I did, generate a vUE instance to hang under the entire vue instance.

var bus = new Vue()
Vue.prototype.bus = bus
Copy the code
// The sender sibling component fires$emitSet the name and pass parametersmounted(){
    this.bus.$emit('SonByDauChange'.'I am grandSonByDau')}Copy the code
// The receiver brother component listens for events and executes a callback (methods:{brotherData(value){console.log(value) //'I am grandSonByDau'}},mounted(){
    this.bus.$on('SonByDauChange',this.brotherData)
}  
Copy the code

Four,vm.$attrsandvm.$listeners

An evolutionary version of props and EMIT’s parent component pass-through. It can be passed across levels from parent to grandchild, with the intermediate child serving as an implementation carrier for vm.$attrs and VM.$Listeners

Vm.$attrs holds properties that are not flagged by the quilt component props, which can be interpreted as data that the parent component binds itself to the child component

// The parent component introduces the son child <div> which is the parent </div> < son :myData="value" :grandSon="grandSon" @changeGrandSon="changeGrandSon"></Son>
data () {
    return {
      myData:'from props',
      grandSon:'from father'}; }, methods: {changeGrandSon(value){console.log(value) // from grandSon}}, // Child component, what can be referenced in the parent component is the value of myData, but we can use vm.$attrThe object gets properties outside of props <div> which is the child component </div> <grandSon V-bind ="$attrs" v-on="$listeners"GrandSon props:{myData:{grandSon props:{grandSon props:{grandSon props:{grandSon props:{grandSon props:{grandSon props:{type:String,
        default:' '
}
mounted() {
    console.log(this.$attrs.granson) // can get props from father}, // can get props from parent <div> <div>{{$attrs.grandSon}}</div> // from father
 mounted() {
    console.log(this.$attrs)
    this.$emit('changeGrandSon'.'from grandSon'// Trigger changeGrandSon event},Copy the code

Note: $listeners and vm.$listeners can send values and events across levels from parent components, but require V-bind =”$attrs” v-on=”$listeners”.

Provide/inject

This pair of options needs to be used together to allow an ancestor component to inject a dependency into all of its descendants, regardless of how deep the component hierarchy is, and remain in effect as long as the upstream and downstream relationship is established. Only data is passed down, and no event response is passed up. It can be passed down across levels, as long as there are inject values for children and grandchildren.

// The parent component is provided'foo'
var Provider = {
  provide: {
    foo: 'bar'} / /... } // Child and grandchild component injection'foo'
var Child = {
  inject: ['foo'].created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}
Copy the code

Use Vuex and localStorage

Worthwhile interaction of components through the use of data storage repositories. Vuex is recommended to manage value communication between components in large projects. Associations of multiple components can be generated around vuEX’s state control. For details on the use of VUex, please refer to the official documentation

Seven, end

Just put forward the idea, there may be a hole in the middle of the more practical operation you need to try, combined with the API documentation.