祖孙组件传值

在子组件定义个函数

//孙子组件
<template>
  <div>
    <div>我是孙子组件</div>
    <button @click="transformDataTo">点击传递数据给爷爷组件</button>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return { msg: "wo is wangsu" };
  },
  mounted() {},
  components: {},
  methods: {
    dispatch(eventName, data) {
      let parent = this.$parent;
      while (parent) {
        if (parent) {
          parent.$emit(eventName, data);
          parent = parent.$parent;
        } else {
          break;
        }
      }
    },
    transformDataTo() {
      this.dispatch("inputs", this.msg);
    },
  },
};
</script>
<style></style>

//子组件
<template>
  <div>
    <div></div>
    <Hello />
  </div>
</template>
<script>
import Hello from "./Hello.vue";
export default {
  name: "",
  data() {
    return {};
  },
  methods: {},
  components: {
    Hello,
  },
};
</script>
<style></style>

//父组件
<template>
  <div>
    <Mine @inputs="change" />
    <h1>{{msg}}</h1>
  </div>
</template>
<script>
import Mine from "./components/Mine.vue";
export default {
  name: "App",
  data() {
    return {
      msg: "",
    };
  },
  components: {
    Mine,
  },
  methods: {
    change(msg) {
      this.msg = msg;
    },
  },
};
</script>
<style></style>