How to get variables in child components of Vue

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 operate the child component to display it

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

introduce:

Parent component:

Here, by binding the ref attribute to the child component, customizing the naming 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 all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.