vue2.0 pass value

Father to son

props

provide和inject

It must be two components that have a relationship. You cannot pass values ​​between two unrelated components. You can only pass values ​​across levels.
Related article link: article .

$attrs

Example: In the
parent component and the
child component, if it is not received in props, it will be in this.$attrs, if it is received, it will not be in this. $attrs
, as shown in the following figure

$listeners (you can directly change the value in the parent component)

You can customize events in the sub-components, as shown in the figure below if the sub-components do not distribute events

In the parent component:

In the child component:
Principle: call this. $listeners.send to pass in a value, which will be passed to the send method in the parent component, and then the data will be changed

.send (you can directly change the value in the parent component)

Need to distribute the event method through this. $emit in the sub-component. The first parameter is the event name, which must be called'update: the attribute name to be modified', and the second parameter is the modified value

$parent (you can directly change the value in the parent component)

Subassembly:

 click（）{
    
    
    this.$parent.name='改变之后的值'  //parent后面跟传的值
}

Pass from son to father

1.ref (you can directly modify the sub-component value)

<child  ref="child ></child>


 click（）{
    
    
   console.log(this.$refs.child) 
}

2.this.$children (get an array) (you can directly modify the value of the child component)

3.$emit (distribution event form)

4. Pass to the parent component through the slot

Knowledge 1 -----An anonymous slot without a name or an attribute can be written directly in the parent component (without template). When the slot has no name, the name defaults to when used in the parent component Default (in the case of template)
Knowledge 2 ---- Slots will not generate actual labels on the page, you need to use labels in the slot to wrap
Knowledge 3 ---- If you want to get scoped slots this.$scopedSlots .red() >>>Used to encapsulate components

In the sub-component: (take acting on the slot as an example)

In the parent component:

$bus (passing value between two components)

Principle: Use to create an empty Vue instance
. Create a bus file under the src file, and then create an index.js under it. The content of index.js is as follows

 import Vue from 'vue'
 const bus = new Vue()
 Vue.prototype.$bus=bus

Then in main.js

import './bus'

Use (pass):

click（）{
    
    
this.$bus.$emit('send',this.name) //第一个为事件名，第二个参数为要传的数据
}

Use (receive):

this.$bus.$on('send',data=>{
    
    
    console.log(data)
})

vuex

Distribute via app.vue