Passing parameters between vue components

1. Passing Parameter from Father to Son

The parent component parent.vue:

Introduce sub-components, pass parameters through v-bind

<template>
    <div class="myVue">
        <children :data="msg"></children>
    </div>
</template>
<script>
import children from './children'
export default {
  name: 'parent',
  data () {
    return {
      msg: '父传子'
    }
  },
  components: {
    children
  }
}
</script>

Child component children.vue

Introduce the passed parameters through props

<template>
 <div>{
   
   {data}}</div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  props: ['data']
}
</script>
<style lang="less" scoped>
  div {
    font-size: 40px;
  }
</style>

Props can also verify parameters:

 props: {
      data: {
          type: String,   // 传入类型
          required: true, // 是否必须
          default: ''     // 默认值
      } 
  }

Second, the son to the father

Child component: children.vue

The function bound by v-on, use this.$emit to pass parameters in the function

<template>
 <div @click="func">点击向父组件传参</div>
</template>

<script>
export default {
  data () {
    return {
      msg: '子向父'
    }
  },
  methods: {
    func () {
      this.$emit('funcParent', this.msg)
    }
  }
}
</script>
<style lang="less" scoped>
  div {
    font-size: 40px;
  }
  div:hover {
    cursor: pointer;
  }
</style>

Parent component: parent.vue

Accept the passed function through v-on, and accept the parameters in the custom function

<template>
    <div class="myVue">
        <children @funcParent="func"></children>
    </div>
</template>
<script>
import children from './children'
export default {
  name: 'parent',
  data () {
    return {
    }
  },
  components: {
    children
  },
  methods: {
    func (data) {
      console.log(data)
    }
  }
}
</script>

Supplementary knowledge:

$emit is the event method mounted on the vue instance, and it is used:

vm.$emit( eventName, […args] )

Parameters : eventName is the name of the triggered event (string), [...args] is the multiple parameters

Function : Trigger the eventName event on the current instance and pass the parameters to the listener callback

Three, pass parameters between brother components

Method 1: Transfer of parent component

This method is easy to understand, but it is more troublesome. It is to pass the parameters in a child component to the parent component through v-on and $emit(), and then the parent component to another child component through v-bind. I believe everyone Yes, some codes are omitted here.

Method 2: With the help of the event car, the data is transmitted through the event car

Create a js file in a location you like. I named it bus.js to create an instance of Vue so that all brothers share the same event mechanism. The content is as follows:

import Vue from 'vue'
export default new Vue()

In the sibling component children.vue that passes parameters:

Pass the parameters to the function funcBrother via Bus.$emit

<template>
  <div>
      <button @click="func">点击按钮向兄弟组件children传值</button>
  </div>
</template>

<script>
import Bus from '../bus'
export default {
  data () {
    return {
      x: 1
    }
  },
  methods: {
    func () {
      Bus.$emit('funcBrother', this.x++)
    }
  }
}
</script>
<style lang="less" scoped>
  div {
    font-size: 40px;
  }
  div:hover {
    cursor: pointer;
  }
</style>

 In the accepted brother component brother.vue:

 Receive the value passed through Bus.$on

<template>
 <div>
    第{
   
   {msg}}次
 </div>
</template>

<script>
import Bus from '../bus'
export default {
  data () {
    return {
      msg: 0
    }
  },
  created () {
    Bus.$on('funcBrother', (val) => {
      this.msg = val
    })
  }
}
</script>

Method 3: Put the required parameters directly in localStroage or sessionStroage

This is the work of deposit and withdrawal. At the same time, pay attention to the difference between the two, the difference between LocalStorage and sessionStorage can be seen . But you must pay attention to several issues when storing in this way:

• Storage space is limited, and things that do not need to be stored permanently are cleared in time after use
• Because it is used globally, it is necessary to use the namespace reasonably to prevent problems such as repeated key pollution, and finally agree in advance or write it in the README
• It may be necessary to store and take out operations in multiple components, so the coupling degree is high, it is very troublesome when modifying, and finally encapsulated into function processing