Vue中父子组件，爷孙组件传值

1. 父组件向子组件传值

步骤： 父组件中引入子组件、调用子组件并引用、在引用的标签上给子组件传值。

定义parent.vue父组件，向子组件传值

<template>
  <div>
    我是父组件
    <!-- 引入子组件 -->
    <child :hello="hello"></child>
  </div>
</template>
<script>
import child from "./components/child";

export default {
  components: {
    child
  },
  data() {
    return {
      hello: "你好，孩子"
    };
  }
};
</script>

子组件通过props来接受父组件传过来的值
定义child.vue子组件，并接收父组件传过来的值

<template>
  <div>
    我是孩子 这个父亲给我的{{ hello }}


  </div>
</template>
<script>


export default {
// 第一种方法接收
 //  props: ["hello"],
// 第二种接受方法
  props: {
    hello: {
      type: String, // 类型，还可以为Array,Object,Number等类型
      default: "" // 默认值 这里默认为空字符串
    }
  },
};
</script>

结果如下图

image.png

2. 爷孙组件传值

通过 provide / inject来进行爷孙组件的传值

建立grandSon.vue孙子文件,添加provide属性

  provide: {
    foo: "爷爷传递的 "
  },

修改parent组件如下

<template>
  <div>
    我是父组件
    <!-- 引入子组件 -->
    <child :hello="hello"></child>
  </div>
</template>
<script>
import child from "./components/child";

export default {
  provide: {
    foo: "爷爷传递的 "
  },
  components: {
    child
  },
  data() {
    return {
      hello: "你好，孩子"
    };
  }
};
</script>

建立grandSon.vue文件,通过inject接收爷爷传过来的值

<template>
  <div>{{ foo }}</div>
</template>
<script>
export default {
  inject: ["foo"],

  data() {
    return {};
  }
};
</script>

子组件 child.vue中引入grandSon.vue，child.vue最终如下

<template>
  <div>
    我是孩子 这个父亲给我的{{ hello }}

    <grand></grand>
  </div>
</template>
<script>
import grand from "./grandSon";

export default {
  //   props: ["hello"],
  props: {
    hello: {
      type: String,
      default: ""
    }
  },
  inject: ["foo"],

  components: {
    grand
  },
  data() {
    return {};
  }
};
</script>

最终效果如下

image.png