can write a ref property to the parent component, and the parent component can get the data and methods in the child component through ref (that is, the say method of the example child component), so that the event of the child component can be triggered in the parent component. The parent component passes parameters to the child component through the prop property (that is, formData in the example).
<template>
<div>
<children ref="children" :formData="formData"></children>
<button @click="handleSubmit"></button>
</div>
</template>
<script>
import children from './children.vue'
export default {
data () {
return {
formData:{
name:'',
mobile: ''
}
}
},
methods:{
handleSubmit(){
this.$refs.children.say();
}
},
components:{
'children': children
}
}
</script>
<template>
<div class="children">
</div>
</template>
<script>
export default {
//props
props: {
formData: {
type: Object,
default: () => {
return {}
}
}
},
data () {
return {
childrenSay: 'hello, parent'
}
},
methods: {
say(){
console.log(this.childrenSay);
}
}
}
</script>
<template>
<div>
<button ref='btn' @click='activeChild'></button>
</div>
</template>
<script>
exports default{
methods: {
activeChild(){
this.$refs.btn.childMethods('aaaa')
}
}
}
</script>
The childMethods in the
code is the child component event to be triggered, and 'aaaa' is the parameter to be passed to the child component
this is the communication between parent and child components. You can refer to my article vue parent-child component communication . Of course, you can also check ide/components.html-sharpProp" rel=" nofollow noreferrer "> official document
parent component
<template>
<div>
<el-button type="text" @click="sonFun">useSon</el-button>
<sonV ref='sonV' :mes="sonData"></sonV>
</div>
</template>
<script>
import sonV from './test.vue';
export default {
components: {
sonV
},
data() {
return {
sonData: ''
};
},
medthods: {
sonFun() {
this.sonData = '123';
let param = 456;
this.$refs.sonV.sonFun(param);
}
}
};
</script>
subcomponents
<template>
<div>{{mes}}</div>
</template>
<script>
export default {
props:['mes'],
data(){
return{
}
},
methods:{
sonFun(param){
console.log(this.mes)
console.log(param)
}
}
}
</script>
VUEX
vuex can be handled completely, and the logic can be distinguished
.