One of the highlights is the component of the project vue. Use assembly can greatly enhance the item code reuse rate, reduce the code amount. But the biggest difficulty using components is communication between father and son components.
Child communication father
Parent component
<template>
<div class="parent">
我是父组件
<!--父组件监听子组件触发的say方法，调用自己的parentSay方法-->
<!--通过:msg将父组件的数据传递给子组件-->
<children :msg="msg" @say="parentSay"></children>
</div>
</template>
<script>
import Children from './children.vue'
export default {
data () {
return {
msg: 'hello, children'
}
},
methods: {
// 参数就是子组件传递出来的数据
parentSay(msg){
console.log(msg) // hello, parent
}
},
// 引入子组件
components:{
children: Children
}
}
</script>Subassembly
<template>
<div class="hello">
<div class="children" @click="say">
我是子组件
<div>
父组件对我说：{{msg}}
</div>
</div>
</div>
</template>
<script>
export default {
//父组件通过props属性传递进来的数据
props: {
msg: {
type: String,
default: () => {
return ''
}
}
},
data () {
return {
childrenSay: 'hello, parent'
}
},
methods: {
// 子组件通过emit方法触发父组件中定义好的函数，从而将子组件中的数据传递给父组件
say(){
this.$emit('say' , this.childrenSay);
}
}
}
</script>$ Subassembly using EMIT parent component method call a method to achieve the purpose of the parent sub-communication.
Father Tsushinko
Parent component
<!--Html-->
<template>
<!--父组件触发click方法-->
<div class="parent" @click="say">
我是父组件
<!--通过ref标记子组件-->
<children ref="child"></children>
</div>
</template>
<script>
import Children from './children.vue'
export default {
data () {
return {
msg: "hello,my son"
}
},
methods: {
// 通过$refs调用子组件的parentSay方法
say(){
this.$refs.child.parentSay(this.msg);
}
},
// 引入子组件
components:{
children: Children
}
}
</script>Subassembly
<template>
<div class="hello">
<div class="children" >
我是子组件
<div>
父组件对我说：{{msg}}
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
msg: ''
}
},
methods: {
// 父组件调用的JavaScript方法parentSay
parentSay(msg){
this.msg = msg;
}
}
}
</script>Parent component by $refsa method call subcomponents.
Sons above components is in communication mode, data is directly transmitted component Sons The props, or use $emitand $refsrely on data transfer events.
Parent-child communication components enhance articles
In the above, the parent child communication is the trigger click event in the sub- method and then call the parent element, parent child communication is the click event is triggered in the parent method call subcomponents. But in reality there may be sub-assembly does not allow the click event when a parent child communication and events in a parent or parent communication midnight click event in the sub-assembly in.
When he hit the child in the parent component communication Parent Event
This situation is very common, for example, form when submitting a form content for sub-assemblies, and the Save button on the parent component. Then click on the Save button you want to get the value of the sub-components of the form. Has not just communicate with the parent and child of the parent child communication needs to be used together to complete the communication process in this case both.
The idea is to realize when you click an event, the first father and son by calling a method of communication sub-assemblies, sub-assemblies and the method of using another method in child-parent communication and information call the parent component of the parent assembly passed back. The following is a code demonstrates:
Parent component
<template>
<div class="parent" @click="getData">
我是父组件
<!--父组件监听子组件触发的transData方法，调用自己的transData方法-->
<!--通过ref标记子组件-->
<children ref="child" @transData="transData"></children>
</div>
</template>
<script>
import Children from './children.vue'
export default {
data () {
return {
msg: 'hello, children'
}
},
methods: {
getData(){
// 调用子组件的getData方法
this.$refs.child.getData();
},
// 参数就是子组件传递出来的数据
transData(msg){
console.log(msg) // hello, parent
}
},
// 引入子组件
components:{
children: Children
}
}
</script>Subassembly
<template>
<div class="hello">
<div class="children" >
我是子组件
<div>
子组件的数据：{{childrenSay}}
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
childrenSay: 'hello, parent'
}
},
methods: {
// 子组件通过emit方法触发父组件中定义好的函数，从而将子组件中的数据传递给父组件
getData() {
this.$emit('transData' , this.childrenSay);
}
}
}
</script>Another case also, and this idea as the basis of flexibility in the use of communication with the Father the Son and the Father of communication.
Like turn commentary is the greatest encouragement