Several methods of passing values in vue (3)

Preface

In the vue project, the transfer of data between components is a very common behavior. Here we summarize several common ways of passing values between vue components, among which the main ones are parent-child components, and non-parent-child components are passed.

Parent component passes value to child component

Method: Set the data to be passed in the parent component, bind a custom attribute to the child component referenced in the parent component and bind the data to the custom attribute, and add parameters props to the child component to receive it. For details, please refer toOfficial Documentation。

The parent component passes the parameter code as follows:

<template>
<center-template :form='userinfo'></center-template>
</template>
<script>
import CenterTemplate from '../../components/admin/userCenterTemplate'
export default {
 components: {
  'center-template': CenterTemplate
 },
 data () {
  return {
   userinfo: {name: 'jack'}
  }
 }, 
}
</script>

In the above code, by binding dynamic parameters: form='userinfo' on the child component, the child component can be received through props.

The subcomponent receives parameter codes as follows:

...
export default {
  props: {
  // take over    form: { userinfo: Object }
    }
  },
}

// Another way to writeexport default {
  props: {
  // take over    form: ['userinfo']
    }
  },
}

In the above code, you can also use arrays to accept parameters, but you cannot specify the type of parameters.

Subcomponent pass values to parent component

Method: The child component is triggered by the vue instance method $emit and can carry parameters. The parent component listens with @(v-on), and then performs method processing.

Subcomponent upload value

&lt;template&gt;
  &lt;ul class="letter_city"&gt;
    &lt;li @click="selectItem('Child component passes value to parent component')"&gt;
    &lt;/li&gt;
   &lt;/ul&gt;
&lt;/template&gt;
&lt;script&gt;
export default {
   methods: {
    selectItem(value) {
      this.$emit('selectItems', value)
    }
  }
}
&lt;/script&gt;

In the above code, this refers to a vue instance, and the child component triggers events and passes parameters to the parent component through $emit.

Parent component listens to the values transmitted from the child component

&lt;template&gt;
  &lt;city-pages @selectItem='selectItem'&gt;&lt;/city-pages&gt;
&lt;/template&gt;
&lt;script&gt;
import cityPages from './cityPages'
export default {
  components: {
    cityPages
  },
  methods: {
    selectItem(value) {
      (value) // The child component passes value to the parent component    }
  }
}
&lt;/script&gt;

In the above code, listen to the method in the child component. If the child component triggers the method, the parameters transmitted from the child component can be obtained between the parent and child.

Non-parent-child component passes value one

Event BUS bus method: create a new vue instance to realize $on reception and $emit to trigger events

1. Create a new file:

// common/

import Vue from 'vue';

// Use Event Busconst bus = new Vue();

export default bus;

2. Component 1 (receive notification information)

import bus from '@/common/'

export default{
  data(){
    return {
        collapseData: ''   
    }
  },
  created() {
    // Listen to collapse. If there is any change, you will receive a notification and change the collapseData value.    bus.$on('collapse', msg =&gt; {
       = msg
    })
  }
}

3. Component 2 (release information)

import bus from '@/common/'

export default {
  methods: {
    sendData(){
      // Publish a signal and trigger this function, and other receiving functions will receive corresponding information      bus.$emit('collapse', 'information')
    }
  }
}

Non-parent-child component passes value two

Borrowing group vux plug-in to realize the value transfer between components.

1. Load vuex through npm, create a file, and then introduce it in. The file code is as follows:

import Vue from 'vue'
 import Vuex from 'vuex'
 (Vuex);
 const state = {
  message:'Hello World'
 };
 const mutations = {
  newMessage(state,msg){
    = msg
  }
 }
 export default new ({
  state,
  mutations
 })

3. Store the value of vuex in the component, generally as follows:

The values in state can only be submitted by Action to modify and assign values.

&lt;template&gt;
 &lt;div&gt;
 &lt;input type="text" @blur=saveName(username) v-model="username"&gt;
 &lt;/div&gt;
&lt;/template&gt;
 
&lt;script type="text/javascript"&gt;
 // It is very important to introduce mapActions import { mapActions } from 'vuex'
 export default {
 data() {
 return {
 username:'',
 password: ''
 }
 },
 methods: {
 ...mapActions({
 // Trigger the callback in the blur event of input and return the input value as a parameter to the store saveName: 'saveName'
 })
 }
 }
&lt;/script&gt;

3. Get the Vuex value in the component, generally as follows:

&lt;template&gt;
  &lt;div &gt;
    {{_name}}
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import {mapState} from 'vuex'
export default {
  name: 'List',
  data() { return{} },
  computed: {
    // 1 Ordinary writing    // name() { return this.$ }
    // 2 Concise writing    //...mapState(['name']) 
    // 3 rename    ...mapState({_name: "name"})
  }
&lt;/script&gt;

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.

Several methods of passing values ​​in vue (3)

Several methods of passing values in vue (3)