vue-pc后台管理系统：父子传参和子父传参，$parent(四)

我大概应该处于会用的状态，也就说一说怎么使用

1.父传子

First.vue

<template>
  <div class="first">
    <el-tabs @tab-click="handleClick">
      <el-tab-pane :label="item" v-for="item in labelList" :key="item">
      <!--父传子-->
        <containTab :msg="item"></containTab>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
//引入组件
import ContainTab from "@/components/ContainTab";
export default {
  name: "First",
  components: {
  //注册组件
    ContainTab,
  },
  data() {
    return {
      labelList: ["用户管理", "配置管理", "角色管理", "定时任务补偿"],
    };
  },
  methods: {
    handleClick() {},
  },
};
</script>
<style lang="less" scoped></style>

Contain组件

ContainTab.vue

<template>
  <div class="containTab">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "ContainTab",
  //这个属性，可以接收从父组件传来的值
  props: {
    msg: String,
  },
};
</script>
<style scoped lang="less"></style>

这样父传子就完成了

2.子传父

First.vue

<template>
  <div class="first">
    <el-tabs @tab-click="handleClick">
      <el-tab-pane :label="item" v-for="item in labelList" :key="item">
        			<!--父传子-->  <!--子传父-->
        <containTab :msg="item" @showMsg="showMsg"></containTab>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import ContainTab from "@/components/ContainTab";
export default {
  name: "First",
  components: {
    ContainTab,
  },
  data() {
    return {
      labelList: ["用户管理", "配置管理", "角色管理", "定时任务补偿"],
    };
  },
  methods: {
    handleClick() {},
    //子组件触发父组件的方法，并且传递参数
    showMsg(e) {
      this.$message({
        message: e,
        center: true,
        type: "success",
      });
    },
  },
};

ContainTab.vue

<template>
  <div class="containTab">
    <h1>父传子：{{ msg }}</h1>
    <el-button @click="onMsg">子传父</el-button>
  </div>
</template>

<script>
export default {
  name: "ContainTab",
  props: {
    msg: String,
  },
  methods: {
    onMsg() {
    //触发父组件的方法，并且传递参数
      this.$emit("showMsg", this.msg);
    },
  },
};
</script>
<style scoped lang="less"></style>

这样子传父就完成了

子传父：主要是prop属性
父传子：主要是自定义事件

3.$parent

子组件通过parent可以获父组件实例 ，然 后通过这个实例就可以访问父组件的属性和方法

 onMsg() {
    //触发父组件的方法，并且传递参数
      this.$parent.showMsg(this.msg);
    },