Sharing examples of 4 Vue component communication methods

The parent component passes data to the child component

• The parent component needs to do a total of 4 things Things

• 1.import son from './son.js' Register all sub-component names in "son"}

• 3. Apply the sub-component in the template of the parent component,

• 4. If you need to pass data to the subcomponent, write

• in the template

   // 1.引入子组件 
       import counter from './counter'     import son from './son'

  Copy after login

  // 2.在ccmponents里注册子组件    components : {
          counter,
          son
      },

  Copy after login

  // 3.在template里使用子组件   <son></son>

  Copy after login
       

   // 4.如果需要传递数据,也是在templete里写
   
     <counter :num="number"></counter>

  Copy after login
The sub-component only needs to do one thing

• 1. Use props to accept data, and you can use the data directly

• 2. The data received by the sub-component cannot be modified. If you really need to modify it, you can use calculated properties, or assign the data to a variable in the child component data

•        

     // 1.用Props接受数据      props: [               'num'
             ],

  Copy after login
         

  // 2.如果需要修改得到的数据,可以这样写
     props: [            'num'
          ],  data () {        return {
              number : this.num
          }
      },

  Copy after login
  The child component passes data to the parent component

The parent component needs to do a total of 2 things

• Define the event in the template

• In Write functions in methods to listen to the event triggering of sub-components

•        

  // 1. 在templete里应用子组件时,定义事件changeNumber
        <counter :num="number"                 @changeNumber="changeNumber"
        >
        </counter>

  Copy after login
         

  // 2. 用changeNumber监听事件是否触发
          methods: {
              changeNumber(e){                console.log('子组件emit了',e);                this.number = e
              },
          }

  Copy after login
The sub-component needs a total of 1 thing

• #After the data changes, use $emit to trigger it

•      

  // 1. 子组件在数据变化后,用$emit触发即可,第二个参数可以传递参数
          methods: {
              increment(){                    this.number++                    this.$emit('changeNumber', this.number)
                  },
          }

  Copy after login
  The second communication method: eventBus
eventBus communication This method is aimed at communication between non-parent and child components, and its principle is still through event triggering and monitoring.

But because they are non-parent-child components, they need an intermediate component to connect.

I use it by defining a component that can be accessed by all components on the root component, which is the #app component. The specific usage is as follows

Using eventBus to pass data, we have a total of Three things need to be done

1. Add the Bus attribute to the app component (so that all components can access it through this.$root.Bus, and there is no need to introduce any files)

• 2. In component 1, this.$root.Bus.$emit triggers the event

• 3. In component 2, this. $root.Bus.$on listening event

•        

  // 1.在main.js里给app组件,添加bus属性import Vue from 'vue'new Vue({
    el: '#app',
    components: { App },  template: '<App/>',
    data(){    return {
        Bus : new Vue()
      }
    }
  })

  Copy after login
           

  // 2.在组件1里,触发emitincrement(){
          this.number++
          this.$root.Bus.$emit('eventName', this.number)
      },

  Copy after login
         

  // 3.在组件2里,监听事件,接受数据mounted(){    this.$root.Bus.$on('eventName', value => {        this.number = value
          console.log('busEvent');
      })
  },

  Copy after login

  The third communication method: using localStorage or sessionStorage

This kind of communication is relatively simple, the disadvantage is that the data and The state is relatively chaotic and not easy to maintain.

Get data through window.localStorage.getItem(key)

The fourth communication method: using Vuex

Vuex is more complicated, you can write a separate article