Ⅰ. Component interaction issues:
1. Component interaction:
As we all know, the component based vueon is a single-file component development, so it involves the interaction between components;
most of the component interaction problems can be divided into several modules:
子传父, , 父传子and 兄弟之间parameter passing;
2. Based refon parent-child interaction:
refUsed to register reference information for elements or subcomponents, the reference information will be registered on $refsthe object
if used on a normal DOM element, the reference points to the DOM element; if used on a subcomponent, the reference points to component instance;
Ⅱ. Based on ref, realize the implementation process of passing from son to father (ie: parent tune):
1、父调子的方法(methods)：
First, the core code:
A. Introduce child components in the parent component:
// 在 html 中：
<subassembly></subassembly>
// 在 javascript 中：
import Subassembly from '@/views/Subassembly'
// 在 components 组件中：
components:{
Subassembly
},
B. Declare refand call openDialogthe method in the subcomponent:
// 在 html 中添加 ref;
<subassembly ref="subassembly"></subassembly>
// 在 javascript 中 methods 中调用子组件 openDialog 的过程;
addClick() {
this.$refs.subassembly.openDialog()
// 此时的 subassembly 就是 ref 值，而 openDialog 方法就是 Subassembly 子组件中的方法；
// 即：此时触发 addClick 方法就能调用子组件的 openDialog 方法；
},
Second, the result display:
A. If 子组件the method in is set as follows:
B. Then 父组件the console that calls this method in is displayed as:
2、父调子的数据(data):
First, the core code:
A. In 父组件中引入子组件:
// 在 html 中：
<subassembly></subassembly>
// 在 javascript 中：
import Subassembly from '@/views/Subassembly'
// 在 components 组件中：
components:{
Subassembly
},
B. Declare refand call the datadata in the subcomponent:form.name
// 在 html 中添加 ref;
<subassembly ref="subassembly"></subassembly>
// 在 javascript 中 methods 中调用子组件 data 中 form.name 的过程;
addClick() {
let obj = this.$refs.subassembly.form
console.log(obj);
// 此时的 subassembly 就是 ref 值，而 form 就是 Subassembly 子组件 data 中的对象值；
// 即：此时触发 addClick 方法就能调用子组件 data 中的 form 对象；
},
Second, the result display:
A. If it is set datain as follows:
B. Then the console display dataof formis as follows:
Ⅲ. Based on ref, realize the implementation process of father-to-son (ie: son-to-father) implementation:
1、子调父的方法(methods)：
First, the core code:
A. In 父组件中引入子组件:
// 在 html 中：
<subassembly></subassembly>
// 在 javascript 中：
import Subassembly from '@/views/Subassembly'
// 在 components 组件中：
components:{
Subassembly
},
B. Declare @新名称and call parentMethodthe method in the parent component:
// 在 html 中添加 @新名称;
// 注意：此时的 @update 是可以任意取名字的；
<subassembly @update="parentMethods"></subassembly>
// 在 javascript 中 methods 中调用父组件 parentMethods 的过程;
sonMethods() {
this.$emit('update')
// 注意：此时的 update 是要与 @新名称 中的 “新名称” 保持一致；
// 即：此时触发 sonMethods 方法就能调用父组件的 parentMethod 方法；
}
Second, the result display:
A. If 父组件the method in is set as follows:
B. Then 子组件the console that calls this method in is displayed as:
2、子调父的数据(data):
First, the core code:
A. In 父组件中引入子组件:
// 在 html 中：
<subassembly></subassembly>
// 在 javascript 中：
import Subassembly from '@/views/Subassembly'
// 在 components 组件中：
components:{
Subassembly
},
B. Declare :新名称and call the method indata the parent component:tableData
// 在 html 中添加 :新名称;
// 注意：此时的 :tableAllData 是可以任意取名字的；
<subassembly :tableAllData="tableData"></subassembly>
// 在 javascript 中 props 中调用父组件 data 中 tableData 的过程;
props: {
tableAllData:[]
// 注意：此时的 tableAllData 是要与 :新名称 中的 “新名称” 保持一致；
// 即：此时在子组件中调用 tableAllData 就能拿到父组件 data 中的 tableData 值；
},
Second, the result display:
A. dataIf is set as follows:
B. Then the console display of the value of calling datathe tableAllDatais as follows:
C. At this time, the calling method in the subcomponent is:
// That is, as long as openDialogthe method , tableAllDatathe value in the subcomponent can be successfully called, then tableDatathe value ;
Ⅳ. Summary:
First, where there is something wrong or inappropriate, please give me some pointers and exchanges!
Second, if you are interested, you can pay more attention to this column (Vue (Vue2+Vue3) interview must-have column):https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482