【Vue】10.vue中父组件通过props属性向子组件传值

骑猪看日落 2022-03-22 06:44 255阅读 0赞

在vue项目开发的过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来，这时可能会产生一些疑问和需求？比如一个组件调用另外一个组件作为自己的组件，那么我们如何进行给子组件进行传值呢？

基于这种情况，本篇就介绍一下vue开发中常用的三种传值方式，父传子，子传父，非父子组件传值。

PS：这也是面试中比较常见的题目~

一、父传子，子传父

引用官网的一句话：父子组件的关系可以总结为props向下传递，事件向上传递。父组件通过props给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlbmJlbjUxMzYyNA_size_16_color_FFFFFF_t_70][]

（1）从父组件向子组件传单个值，type为要传入值得类型，default是要传入值得初始值

父组件Parent.vue

<template>
        <div>
          <child :fatherMethod="fatherMethod"></child>
        </div>
    </template>
    
    <script>
      import Child from '../../components/Child.vue';
    
        export default {
          data() {
            return {
              name: 'Parent',
            };
          },
          methods: {
            fatherMethod() {
              console.log('testing');
            },
          },
          components: {
            child: Child,
          },
        };
    </script>
    
    <style scoped>
    
    </style>

子组件Child.vue

<template>
      <div>
        <button @click="childMethod">点击</button>
      </div>
    </template>
    
    <script>
      export default {
        props: {
          fatherMethod: {
            type: Function, // 数据类型
            default: null, // 初始值
          },
        },
        data() {
          return {
            name: 'Child',
          };
        },
        methods: {
          childMethod() {
            this.fatherMethod();
          },
        },
      };
    </script>
    
    <style scoped>
    
    </style>

（2）从父组件向子组件传多个值，这个时候要用一个数组接收

父组件Parent.vue

<template>
        <div>
          <child :fatherMethod="fatherMethod" :message="name"></child>
        </div>
    </template>
    
    <script>
      import Child from '../../components/Child.vue';
    
        export default {
          data() {
            return {
              name: 'Parent',
            };
          },
          methods: {
            fatherMethod() {
              console.log('testing');
            },
          },
          components: {
            child: Child,
          },
        };
    </script>
    
    <style scoped>
    
    </style>

子组件Child.vue

<template>
      <div>
        <button @click="childMethod">点击</button>
      </div>
    </template>
    
    <script>
      export default {
        props: ['fatherMethod', 'message'],
        data() {
          return {
            name: 'Child',
          };
        },
        created() {
          this.fatherMethod();
          console.log(this.message);
        },
        methods: {
          childMethod() {
            this.fatherMethod();
          },
        },
      };
    </script>
    
    <style scoped>
    
    </style>

created函数中打印输出从父组件传入子组件的参数：

![20190126175531751.png][]

（3）从父组件向子组件传对象类型

父组件向子组件调接口动态传递对象值的时候会有一个问题，就是在子组件中会获取不到传入的数据，比如实例中的data对象，解决的办法就是添加一个监听器，这个很重要。

父组件Parent.vue

<template>
        <div>
          <child :fatherMethod="fatherMethod" :message="name" :data="data"></child>
        </div>
    </template>
    
    <script>
      import Child from '../../components/Child.vue';
    
        export default {
          data() {
            return {
              name: 'Parent',
              data: {
                  name: '',
                  age: 0,
              },
            };
          },
          watch: {
              data(newValue, oldValue) {
                  console.log(newValue, oldValue); // 监听器，监听对象
              } 
          },
          methods: {
            fatherMethod() {
              console.log('testing');
            },
          },
          components: {
            child: Child,
          },
        };
    </script>
    
    <style scoped>
    
    </style>

子组件Child.vue

<template>
      <div>
        <button @click="childMethod">点击</button>
      </div>
    </template>
    
    <script>
      export default {
        props: ['fatherMethod', 'message', 'data'],
        data() {
          return {
            name: 'Child',
          };
        },
        created() {
          this.fatherMethod();
          console.log(this.message);
          console.log(this.data);
        },
        methods: {
          childMethod() {
            this.fatherMethod();
          },
        },
      };
    </script>
    
    <style scoped>
    
    </style>

二、子组件向父组件传值 ，通过$emit完成，以上述第一种情况为例

父组件Parent.vue

<template>
        <div>
          <child :fatherMethod="fatherMethod" v-on:backToParent="backToParent"></child>
        </div>
    </template>
    
    <script>
      import Child from '../../components/Child.vue';
    
        export default {
          data() {
            return {
              name: 'Parent',
            };
          },
          methods: {
            fatherMethod() {
              console.log('testing');
            },
            backToParent(childValue) {
                console.log(childValue); // 接收从子组件传回来的值
            }
          },
          components: {
            child: Child,
          },
        };
    </script>
    
    <style scoped>
    
    </style>

子组件Child.vue

<template>
      <div>
        <button @click="childMethod">点击</button>
      </div>
    </template>
    
    <script>
      export default {
        props: {
          fatherMethod: {
            type: Function, // 数据类型
            default: null, // 初始值
          },
        },
        data() {
          return {
            name: 'Child',
          };
        },
        methods: {
          childMethod() {
            this.fatherMethod();
            this.toParent(); // 给父组件传值
          },
          toParent() {
              this.$emit("backToParent", this.fatherMethod);
          }
        },
      };
    </script>
    
    <style scoped>
    
    </style>

三、非父子组件进行传值

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlbmJlbjUxMzYyNA_size_16_color_FFFFFF_t_70]: /images/20220322/baffb8a84a9e42b1a1da61766550e31a.png
[20190126175531751.png]: /images/20220322/90567e9367f44d699e97dea113a7b14c.png