Parent component gets child component method or property value
The essence of vue is that each part is only responsible for its own work, which makes it easier to maintain.
Here we mainly use $ref of vue
- When used on general tags, the main function is to obtain dom nodes and perform some dom operations.
- When used on a child component, it can be used to obtain the properties of the child component.
So what we want to implement below is how to use child components on parent components
Objective: I need to implement a pop-up window display that controls the child component on the parent component, and determine which content is displayed through the parameters.
First of all, it is easy to think that it is to bind a click event, carry a parameter, and obtain the properties of the child component. In this parent component, I do not control the switch of the child component, but I just obtain the methods or properties of the child component, and let the child component control the switch by itself.
//This is the subcomponent<popup ref="popup"></popup>
//Bind the click event and carry parameters<div class="item-box" @click="showPop('teacher')">
//Define click eventshowPop(event) {
//Get the properties/method of the child component. Here is the show method of obtaining the popup child component and carrying parameters this.$(event);
},In the subcomponent, you need to define methods, control the display of pop-up window content, and save the passed parameters
//Hide the display of the pop-up window<div v-show="showPopup"> <!-- Close button，Click to directlyshowPopupDefined asfalse--> <div class="closePopup" @click="showPopup = false"></div> <!-- Number of teachers --> //Contact which pop-up content is displayed by judging the type value <teacher v-if="type =='teacher'"></teacher> <student v-else-if="type =='student'"></student> <turnover v-else></turnover> </div>
//Define the default value in datadata(){
return {
showPopup: false,
type: ''
}
},
//Finally define the show method in methods to control the display of pop-up windowsmethods:{
show(type){
= type
= true;
}
}This is done, each component is only responsible for what I need to do, and will not affect other components, making it easier to maintain.
Parent component gets variables in child component
In the daily development of vue projects, it is inevitable to extract functional components, so that the structure will have parent-child price, brother components, etc., but this will involve the worthwhile issue of different components that need to be used by each other.
I have said before that the parent component uses ref to operate the child component and pass the value, so let's take a look at it in detail today.
Case 1: Click the button of the parent component to display the child component
Note: You can operate by getting id/class. I will not introduce this method here. As for jquery, please be careful in vue.
Introduction: Here, by binding the ref attribute to the child component, naming the quotation marks, and then the parent component can operate the elements of the child component through this.$refs. name to change its style, etc.
<template> <div class="DbSource-box"> <el-button type="primary" icon="" class="addBtn" @click="addDbSource()">New</el-button> <db-source-add ref="addAlert" v-on:init="init"></db-source-add> </div> </template>
<script>
import DbSourceAdd from "../components/DbSourceManager/DbSourceAdd";
export default {
name: "DbSourceManager",
components: {DbSourceAdd},
methods: {
// Click the Add button to pop up the pop-up box for adding data sources addDbSource(){
this.$.$ = "block";
},
}
}
</script>Case 2: Get variables in child component data
Parent component:
Here, by binding the ref attribute to the child component, naming the name in quotes, and then the parent component can obtain the value in the child component through this.$refs.name.variable name.
<template> <div class="DbSource-box"> <el-button type="primary" icon="" class="selectBtn" @click="deleteSelectDbSource()">Batch Delete</el-button> <db-source-table ref="getSelectData" :Data="Data" v-on:init="init"></db-source-table> </div> </template>
<script>
import DbSourceTable from "../components/DbSourceManager/DbSourceTable";
export default {
name: "DbSourceManager",
components: {DbSourceTable},
methods: {
// Delete the selected data source (batch deletion) deleteSelectDbSource(){
(this.$)
},
}
}
</script>Subcomponents:
<template> <div class="table-box"> </div> </template>
<script>
export default {
name: "DbSourceTable",
props:["Data"],
data(){
return {
multipleSelection:[],
pagesize: 3,
currpage: 1,
currId:""
}
}
</script>OK, the above is how the parent component obtains the value of the child component and operates the child component.
The above is personal experience. I hope you can give you a reference and I hope you can support me more.