(Note: This article applies to certain Vue foundation or development experience of the reader, to explain the article on knowledge is not necessarily comprehensive, but it is very useful in the development process)
Component is the Vue one of the core functions, but also in the development process we often use to. How the interaction between the individual data components, the following describes the three individuals used in the method of the development process -
1, props and $ emit
Parent component by props pass data to the sub-assembly manner; subassembly by $ EMIT , to the parent component v-on received data backhaul manner. Consider next an example below,
Defines the parent component parent.vue , add the following code:
<template>
<div id="demo">
<child :message="message" @getInputValue="getInputValue"></child>
</div>
</template>
<script>
import child from '@/components/common/child.vue';
export default {
name: 'demo',
components: {
child
},
data() {
return {
message: 'hello'
}
},
methods: {
getInputValue(val) {
this.message = val
console.log(this.message)
}
}
}
</script>
Defined subassembly child.vue , add the following code:
<template>
<div id="child">
<el-input v-model="message" clearable placeholder="" @change="handleChangeInput"></el-input>
</div>
</template>
<script>
export default {
name: 'child',
props: {
message: String
},
methods: {
handleChangeInput(val) {
this.$emit('getInputValue', val)
}
}
}
</script>
If the data to be accessed subassembly defined within parent components message , the data in the first binding subassembly components cited parent tag, then props manner transferred to the subassembly; subassembly of message after modification made to $ emit way back to the parent element, parent assembly method getInputValue receiving and re-assigned to the Message .
2, is defined in the subassembly get and set methods
Look at the following two pieces of code, defines the parent component parent.vue , add the following code:
<template>
<div id="demo">
<child ref="childComponent"></child><br>
<el-button type="primary" @click="clickSet">set</el-button>
<el-button type="primary" @click="clickGet">get</el-button>
</div>
</template>
<script>
import child from '@/components/common/child.vue';
export default {
name: 'demo',
components: {
child
},
methods: {
clickSet() {
this.$refs.childComponent.setMessage('hello world');
},
clickGet() {
let msg = this.$refs.childComponent.getMessage();
console.log(msg);
}
}
}
</script>
Defined subassembly child.vue , add the following code:
<template>
<div id="child">
<span>{{message}}</span>
</div>
</template>
<script>
export default {
name: 'child',
data() {
return {
message: 'hello'
}
},
methods: {
getMessage() {
return this.message;
},
setMessage(val) {
this.message = val;
}
}
}
</script>
If the parent element to access data defined in the subassembly Message , by $ refs access subassembly defined manner getMessage and setMessage methods.
3, Vuex
vuex state management for global storage data state, please refer to the specific application earlier , "Application of Four: Vue of VUEX state management" , this will not be described in detail.