Summary of data transfer methods of vue components
Component slot
Named slot
Parent component
<ss @toFOO="zidata=$event">
<p slot="slot1">Slot 2</p>
<p slot="slot2">Slot 3</p>
</ss>
Subcomponents
<slot name="slot1"></slot> <slot name="slot2"></slot>
When defining a child component, data can be bound to a named slot, and the parent component can be obtained through the slot scope attribute
- Application case of old writing in parent component
<p slot="slot1" slot-scope="data">
I'm slot 1{{data.zi}}
</p>
- Application case in new parent component
#slot1 indicates the slot name of the bound sub component
And receive the data in the sub component zi variable name in the data variable
<template #slot1="data">
<p>Slot 1{{data.zi}}</p>
</template>
Parent component passes value to child component props
Binding attribute names in parent component: data1 and data2
The subcomponent uses props array to receive data. The data in props is the same as the data defined in data
The default data is that the parent component binds data to the child component in one direction,
To implement bidirectional binding, you need to use sync syntax in the bound data
: data1.sync='Foo'
//Parent component
<template>
<div>
<p>111</p>
<!-- <HelloWorld :data1='Foo' style="color: red">search/</HelloWorld>-->
<ss :data="Foo"></ss>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import ss from "@/components/ss";
export default {
name: 'app',
components: {
HelloWorld,ss
},
data() {
return {
Foo:'Parent component content'
}
},
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Subcomponents
<template>
<div>
<p>ss</p>
<p>{{data}}</p>
</div>
</template>
<script>
export default {
name: "ss",
props:['data']
}
</script>
<style scoped>
</style>
The child component triggers the parent component event
Generally, the value transfer from sub components to sub components is triggered by some events, such as click Submit, so it needs to be triggered by binding related events
Methods of triggering events by subcomponents:
$emit (event name, parameter)
The method by which the parent component receives events
The @ event name on the component is used to listen to the sub component event $event and receive the event parameters of the sub component
//Subcomponents
<template>
<div>
<p>I'm a subcomponent</p>
<p>{{data}}</p>
<button @click="$emit('toFOO',zi)">Click I to transfer data to the parent component</button>
</div>
</template>
//Parent component
<template>
<div>
<p>Accept subcomponent data:{{zidata}}</p>
<ss @toFOO="zidata=$event">
</ss>
</div>
</template>
remarks::
The parent component can also be processed through the specified method
<ss @toFOO="Specify method name">
<script>
Specify method name( $event){
}
</script>
Mix in mixin
Define a js export mixin mixed content. Modifying the value in it cannot realize that the modified data is updated in each component, which is different from vuex
export const mixindata = {
data() {
return {
name: 'minxin value'
}
},
};
use:
import {mixindata} from './mixin/mixindata';
mixins:[mixindata], //Note that the object in the array is not the variable name
<div>
<p>{{name}}</p> // dom can be used directly
</div>
vuex
Background:
All the data of the component we write is stored inside the component. Call an API, and then store the returned data in a data object. Bind a form to an object or store the object in the data object. All communication between components adopts event mode (communication between child components and parent components) and props mode (communication between parent components and child components). It works well in simple applications, but it is stretched in slightly more complex applications. Take a social networking application for example, the message part. For example, you want to put an icon on the navigation bar at the top of the application to display the number of messages received. At the bottom of the page, you also want a message pop-up window to tell you the number of messages received. Because the icon and pop-up window are not directly related to each other on the page, So connecting them with events and props will be a nightmare: components unrelated to message notification will have to deliver these additional events. Another way is not to share data by connecting two components, but each component sends its own API request. But doing so will be worse: different components will be updated at different points in time, which means that they will render different data, and the API requests sent by the page will far exceed their actual needs.
vuex came into being to help developers manage the state of Vue applications. It provides a centralized store, which can be used in the whole application to store and maintain the global state. It also enables you to verify the stored data to ensure that it is predictable and correct when it is retrieved again.
It can be understood as a global data object
src/store/index.js
export default new Vuex.Store({
// Storing data is also called data
state: {
vuex:'1',
data:[1,2,3],
},
// It is used to change state data. commit submits the data changed by changes
// Cannot send asynchronous request
mutations: {
// The first parameter is fixed to state
setmsg (state,newstate){
state.msg=newstate
console.log(state.msg);
},
// Actions, which can include asynchronous operations
// dispath commit actions to mutations
actions: {
},
modules: {
}
})
Save data
Method 1
The component submits a setmsg event through commit
changemsg(){
this.$store.commit('setmsg',this.input_msg)
Modify the vuex value in the event and listen
mutations: {
// The first parameter is fixed to state
setmsg (state,newstate){
state.msg=newstate
console.log(state.msg);
}
Method 2
Importing methods in vuex through mapMutations
methods: {
...mapMutations(['setmsg']),
vuexdata() {
console.log();
},
<button @click="setmsg(input_msg)">Submit</button>
Fetch data
Mutation synchronization method
Mode 1
this.$store.Variable name
Mode 2 through auxiliary function
Import mapstate helper function
import {mapState} from 'vuex';
mapState(['name']) Automatic acquisition state Variables defined in'name'Returns a method for calculating attributes in data
computed:{
...mapState(['name']) //Through es6 Syntax expansion calculation property object
}
Asynchronous method action asynchronous method
Method 1: through dispatches
this.$store.dispatch('action Chinese legal name','Transmission parameters')Trigger action
Mode 2 through auxiliary function
mapActions(['Actions Medium method'])Get the function of the operation
vuex file split
vuex file index JS will be bloated when there are many contents, which is not easy to maintain and use modules
We can split state, changes and actions
You can create a folder modules in the store, and define related functions according to functional features, such as users JS and other files modules
modules: {
user,
}