vue父子组件相互调用方法和获取data中的数据(学习篇)

1、父组件获取子组件data数据和子组件方法。

给子组件标签加ref,然后通过this.$refs.childData.方法。

<template>
  <!-- 父组件 -->
  <div class="box" style="margin:20px">
    <child ref="childData"></child>
  </div>
</template>
<script>
import child from "./child.vue";
export default {
  components: {
    child,
  },
  data() {
    return {
    };
  },
  created() {
    this.$nextTick(() => {
      this.handelStrData();
    });
  },
  methods: {
    //获取子组件data中的数据
    handelStrData() {
      console.log(this.$refs["childData"].objData);
    },
    handelAZiZuJian() {
      this.$refs.childData.handelAlert();
    },
  },
};
</script>

<template>
  <!-- 子组件 -->
  <div class="box">
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: 20,
      objData: {
        name: "子组件数据",
        time: "2021/6/11",
        today: "星期五",
      },
      arrayData: [
        {
          title: "颜色",
          color: "红色",
        },
        {
          title: "字体",
          color: "微软雅黑",
        },
        {
          title: "字体大小",
          color: "14px",
        },
      ],
    };
  },
  created() {
  },
  methods: {
    handelAlert() {
      alert("我是子组件的方法");
    },
  },
};
</script>

2、子组件获取父组件data数据和子组件方法。

子组件通过this.$parent.方法获取

<template>
  <!-- 父组件 -->
  <div class="box" style="margin:20px">
    <child ref="childData"></child>
  </div>
</template>
<script>
import child from "./child.vue";
export default {
  components: {
    child,
  },
  data() {
    return {
      str: {
        name: "猪小凡",
        age: 18,
        title: "父组件数据",
      },
    };
  },
  created() {
  },
  methods: {
    handelAA() {
      alert("我是父组件方法");
    },
  },
};
</script>

<template>
  <!-- 子组件 -->
  <div class="box">
    <button @click="handelFuZuJian">点击</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
    };
  },
  created() {
    this.getListDara();
  },
  methods: {
    getListDara() {
      console.log(this.$parent.str, "str");
    },
    handelFuZuJian() {
      this.$parent.handelAA();
    },
  },
};
</script>

代码可复制查看效果