The father the son

  1. In the same.vue file, the subcomponent can be used directly

<el-tabs type="card" @tab-click="handleClick()"> <el-tab-pane v-for="(value,index) in keys" :key="value" <div class="content"> <el-form ref="form" label-width="100px"> <el-form-item label=" ">< el-input :value="index"></el-input> </el-form-item> <el-form-item> <el-button type="primary"> </el-form-item> </el-form> </div> </div> </el-tab-pane> </el-tabs>

  1. In different.vue files,
  • The value must be defined in the parent component and shared by all child components. So you define values in the parent component’s data
  • A parent component must have a meeting point with a child component: if you call, register, and reference a child component in the parent component, you can bind the value of the parent component to the child component where the parent and child are linked (that is, on the tag that references the child component)

> <zi-module :value></zi-module>

  • The child component must internally accept the value passed by the parent component: props