What are the ways to pass data in vue
Data flow transfer
Passing properties through props
The parent binds an msg data to the demo2 component
Parent component
<template>
<div class='container'>
<demo2 :msg="msg" @change="change" />
</div>
</template>
<script>
import demo2 from './demo2'
export default {
data(){
return {
msg:'This is the test data'
}
},
methods:{
change(value){
= value
}
},
components: {
demo2
}
}
</script>
The child component uses msg by defining props, and $emit triggers an external function to change the value passed in by the parent.
Subcomponents
<template>
<div class='container'>
{{msg}}
<button @click="change">Click</button>
</div>
</template>
<script>
export default {
props:['msg'],
methods:{
change(){
this.$emit('change','This is new data')
}
}
}
</script>
Collect attributes via $attrs
$attrs will collect the properties bound on the component, and the corresponding class and style will not be processed. If used with props, the priority of props is higher than attrs
Parent component
<template>
<div class="container">
<demo2 class="demo" style="color:red" :msg="msg" />
</div>
</template>
<script>
import demo2 from "./demo2";
export default {
data() {
return {
msg: "This is the test data"
};
},
components: {
demo2
}
};
</script>
This.$attrs in the child component will collect the properties bound on the component.
Subcomponents
<template>
<div class="container">{{$}} </div>
</template>
<script>
export default {
// inheritAttrs:true,
// It will hide properties between lines // props:['msg'],
// Here the priority of props is higher than $attrs. If props are set, then msg will be on data, and there is no msg in $attrs created(){
(this.$attrs)
// There is only one attribute in the object msg }
};
</script>
Collect methods through $listeners
$listeners collects methods bound on the component. The value of the parent component can be changed by passing the arguments
Parent component
<template>
<div class='container'>
{{msg}}
<demo2 class="demo" style="color:red" @msgChange="change"/>
</div>
</template>
<script>
import demo2 from './demo2'
export default {
data () {
return {
msg: 'This is the test data'
}
},
methods: {
change(newvalue){
= newvalue;
}
},
components: {
demo2
}
}
</script>
This.$listeners in the child component will collect methods bound to the component. This.$() can be called directly, so that the value in the parent component data can be modified
Subcomponents
<template>
<div class="container">
<button @click="change">Click</button>
</div>
</template>
<script>
export default {
// inheritAttrs:true,
created(){
(this)
},
methods:{
change(){
// this.$emit('msgChange')
// this.$()
// The same function as $emit, $parent can also achieve this effect
this.$('Changed value')
}
}
};
</script>
Provide dependencies, inject injection dependencies realize data passing across multi-level subcomponents
By providing a dependency object to the parent's provide, the child components it uses can access to
“
Provide and inject bindings are not responsive. This is done deliberately. However, if you pass in an listenable object, the property of its object is still responsive.
”
In fact, the binding of the provide and inject does not do extra things (data binding or something), but only exposes the provided data to the child components. Then whether the exposed data can be corresponding depends on the data itself
Parent component
<template>
<div class='container'>
<demo2 class="demo" style="color:red" :msg="msg" @msgChange="change"/>
</div>
</template>
<script>
import demo2 from './demo2'
export default {
provide(){
return {
msg:,
msgChange:,
// Here this is an listenable object. // This means that the current vue instance itself has completed the data response, and here it is just exposing this instance to its subcomponents used app:this
}
},
data () {
return {
msg: 'This is the test data'
}
},
methods: {
change(){
+= 1;
}
},
components: {
demo2
}
}
</script>
The descendant's child components can inject corresponding dependencies through reject
Subcomponents
<template>
<div class="container">
<!-- thismsgThe value will not change -->
<div>{{msg}} </div>
<!-- msgThe value will change，Because it still points to the parent componentvueExample -->
<div>{{app.$}}</div>
<button @click="msgChange">Click</button>
</div>
</template>
<script>
export default {
inject:['msg','msgChange','app']
};
</script>
Get data by directly accessing component instances
Get component instances through ref
The ref attribute defines the vue instance of the component obtained on the component, and the corresponding dom obtained on the native tag is defined.
You need to wait until the mount is installed before you can get the content in $refs
Parent component
<template>
<div class='container'>
{{msg}}
<demo2 ref="test"/>
</div>
</template>
<script>
import demo2 from './demo2'
export default {
data () {
return {
msg: ''
}
},
// You need to wait until the content in $refs is loaded. // It cannot be used in templates mounted(){
= this.$
},
components: {
demo2
}
}
</script>
Subcomponents
<script>
export default {
data(){
return {
msg:'This is the data of the child component'
}
}
}
</script>
Get component instance via \$parent/$children
The same is true that the corresponding instance must be obtained after mounted
Here is the parent component displays the msg in the child component, and the child component displays the msg in the parent component
Parent component gets child component instance through $children
Parent component
<template>
<div class='container'>
{{msg}}
<demo2/>
</div>
</template>
<script>
import demo2 from './demo2'
export default {
data () {
return {
msg: '',
fatherMsg:"This is the content of the parent component"
}
},
mounted(){
(this.$children)
//Get sonMsg on child component instance, $children is an array that needs to be selected for the corresponding index. = this.$children[0].sonMsg;
},
components: {
demo2
}
}
</script>
Child component gets parent component instance through $paren
Subcomponents
<template>
<div class='container'>
{{msg}}
</div>
</template>
<script>
export default {
data () {
return {
msg:'',
sonMsg: 'This is the data of the subcomponent'
}
},
mounted(){
//Get fatherMsg on the instance of the parent component = this.$;
}
}
</script>
Define a public repository to share data
Define eventBus shared data
Adding $bus to the Vue prototype as a new vue object, you can obtain this vue object through $bus in the global vue instance, thereby obtaining the properties and methods on this object.
Definition in
.$bus = new Vue({
data:{
a:1,
b:2
},
methods:{
log(){
()
}
}
})
Global Vue instances can obtain properties and methods defined on $bus
Share data through Vuex
Official solutions for passing data across multiple components.
store
import Vue from 'vue'
import Vuex from 'vuex'
(Vuex)
export default new ({
state: {
test:'123123123',
test2:'123123123',
},
mutations: {
changeTest(state,payload){
(state,payload)
=
},
changeTest2(state,payload){
(state,payload)
state.test2 =
}
},
actions: {
asyncChageTest({commit},payload){
setTimeout( ()=>{
commit('changeTest2',payload)
},2000)
}
},
modules: {
}
})
Use in components
<template>
<div class='container'>
{{this.$}}
{{test}}
{{this.$.test2}}
{{test2}}
<button @click="change">Click</button>
<button @click="asyncChange">Click</button>
</div>
</template>
<script>
// Introduce mapState helper function to transform state dataimport { mapState,mapMutations,mapActions } from 'vuex'
export default {
data(){
return {
msg:'This is the test data'
}
},
computed:{
...mapState(['test','test2'])
},
methods:{
//Introduce asynchronous or synchronous methods ...mapMutations(['changeTest']),
...mapActions(['asyncChageTest']),
change(){
// Two ways to synchronously modify state values this.$('changeTest',{value:'Change the value of test'});
// ({value:'changed value'}) },
asyncChange(){
// Two ways to asynchronously modify state value this.$('asyncChageTest',{value:'Change the value of test2'})
// ({value:'Change the value of test2 after changing'}) }
},
}
</script>
The above is a summary of the data transmission method between components in Vue. In daily development, it is necessary to use appropriate methods to transmit data according to the scenarios used.
This is the article about the method of data transmission between Vue components (3 types). For more related data transmission content between Vue components, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!