之前写过一篇关于基于 微信小程序的父子组件传值通信与事件触发,今天整理一片关于 Vue 的父子组件的相关内容。

一、组件

子组件
<template>
  <div style="border:1px solid black;width:400px; height: 130px;">
    <h3>我是子组件</h3>
    <button>子组件将值传递给父组件</button>
    <div>子组件接收父组件的值:</div>
  </div>
</template> 
父组件
<template>
 <div style="border:1px solid red;padding:2rem;width:400px;margin:0 auto;">
    <h3>我是父组件</h3>
    <div>子组件向父组件传递的值:</div>
    <Child></Child>
  </div>
</template>

<script>
import Child from './Child';
export default {
    components: {
        Child
    }
}
</script>

效果展示:
在这里插入图片描述
通过这张图可以看出父子组件的结构,下面我们来实习父子组件通信。


二、父子组件通信

在这里插入图片描述

参考文章:Vue 组件通信的8种方式

1、父组件给子组件通信

实现思路:子组件通过 props 来接受父组件传过来的值。

  1. 在父组件中,定义一个data变量,在子组件标签中动态绑定这个值。

    // Father.vue
    <template>
     <div style="border:1px solid red;padding:2rem;width:400px;margin:0 auto;">
        <h3>我是父组件</h3>
        <div>子组件向父组件传递的值:{{ChildMsg}}</div>
        <Child :FatherMsg="data"></Child>
      </div>
    </template>
    
    <script>
    import Child from './Child';
    export default {
        data() {
            return {
                data: 'I am your father',
            }
        },
        components: {
            Child
        }
    }
    </script>
    
  2. 接着在子组件里通过 props 来接收,这样子组件就接收到了父组件传递过来的值了。

    子组件接收的父组件的值分为引用类型和普通类型两种:

    • 普通类型:字符串(String)、数字(Number)、布尔值(Boolean)、空(Null)
    • 引用类型:数组(Array)、对象(Object)
    // Child.vue
    <template>
      <div style="border:1px solid black;width:400px; height: 130px;">
        <h3>我是子组件</h3>
        <button>子组件将值传递给父组件</button>
        <div>父组件向子组件传递的值:{{FatherMsg}}</div>
      </div>
    </template> 
    
    <script>
    export default {
        data() {
            return {
                data: 'I am your children',
            }
        },
        props: ['FatherMsg']
    }
    </script>
    

在这里插入图片描述
由于 Vue 是 单向数据流,子组件是不能直接修改父组件的值。如果子组件要修改来自父组件的值,不能直接修改,要通过事件进行修改:

  1. props 配合 $emit 改变父组件传入的值

    在父组件传入值时,需要有 .sync 修饰符.sync 修饰符是事件绑定的语法糖);
    子组件可以在$emit('父组件方法名', 传递的参数),派发事件修改传入的值;

  2. v-model 配合 input 事件(v-model详解)

    v-model 原则上也是利用 $emit 以及 $on
    v-model 会默认绑定 input 事件

2、子组件向父组件通信

实现思路:通过在子组件中使用 this.$emit(‘函数名’, 传递参数) 来触发自定义事件并传值,然后在父组件中监听该事件即可。

  1. 在子组件中给 button 按钮添加 click 事件,来通过 this.$emit 自定义事件,并传入一个参数:

    <template>
      <div style="border:1px solid black;width:400px; height: 130px;">
        <h3>我是子组件</h3>
        <button @click="send">子组件将值传递给父组件</button>
        <div>父组件向子组件传递的值:{{FatherMsg}}</div>
      </div>
    </template> 
    
    <script>
    export default {
        data() {
            return {
                data: 'I am your children',
            }
        },
        props: ['FatherMsg'],
        methods: {
          send() {
            this.$emit('ListenChild', this.data);
          }
        }
    }
    </script>
    
  2. 在父组件中的子组件标签里,先在 data 里定义一个变量接收这个值,然后监听在子组件中自定义的事件,并接受这个参数赋值给定义的变量:

    <template>
     <div style="border:1px solid red;padding:2rem;width:400px;margin:0 auto;">
        <h3>我是父组件</h3>
        <div>子组件向父组件传递的值:{{ChildMsg}}</div>
        <Child :FatherMsg="data" @ListenChild="ListenChild"></Child>
      </div>
    </template>
    
    <script>
    import Child from './Child';
    export default {
        data() {
            return {
                data: 'I am your father',
                ChildMsg: '',
            }
        },
        components: {
            Child
        },
        methods: {
            ListenChild(data) {
                console.log("子组件传递过来的值:" , data);
                this.ChildMsg = data;
            }
        }
    }
    </script>
    

点击子组件中的“子组件将值传递给父组件”,就可看到如下效果:
在这里插入图片描述

3、父组件 通过 $refs / $children 来获取子组件值

4、子组件通过 $parent 来获取父组件实例的属性和方法

5、$attrs$listeners 获取父组件实例属性和和方法(组件嵌套情况下使用)

6、跨组件之间传值

7、Vuex

8、provide 和 inject 实现父组件向子孙组件传值。(层级不限)


三、父子组件事件触发

父组件调用子组件中的事件方法
  1. 通过 ref 直接调用子组件的方法:

    // Child.vue 
    <template>
      <div style="border: 1px solid black; width: 150px; margin: 10px auto">
        我是子组件
        <div style="color: red"> {{ msg }} </div>
      </div>
    </template>
    <script>
    export default {
        data() {
            return {
                msg: '',
            }
        },
      methods: {
        childFun() {
          console.log('我是子组件的方法 childFun');
          this.msg = '我的方法被调用了'
        },
      },
    };
    </script>
    

    在子组件标签上添加 ref 属性,然后在方法中通过 this.$refs 找到绑定 ref 的属性调用该子组件内的方法即可。

    // Father.vue
    <template>
      <div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto">
        我是父组件
        <Button @click="handleClick">点击调用子组件方法</Button>
        <Child ref="child" />
      </div>
    </template>    
    
    <script>
    import Child from './Child';
    
    export default {
        components: {
            Child
        },
        methods: {
            handleClick() {
                this.$refs.child.childFun();
            },
        },
    }
    </script>
    
  2. 通过组件的 $emit$on 方法:

    // Child.vue 
    <template>
      <div style="border: 1px solid black; width: 150px; margin: 10px auto">
        我是子组件
        <div style="color: red"> {{ msg }} </div>
      </div>
    </template>
    <script>
    export default {
        data() {
            return {
                msg: '',
            }
        },
      mounted() {
        this.$on('childFun', function() {
            console.log('我是子组件方法');
            this.msg = '我的方法被调用了'
        });
      }
    };
    </script>
    

    在子组件中使用 $on 绑定一个方法,然后在父组件中通过 $emit 找到绑定 $on 上面的事件名即可,但是也需要 ref 的配合。

    // Father.vue
    <template>
      <div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto">
        我是父组件
        <Button @click="handleClick">点击调用子组件方法</Button>
        <Child ref="child" />
      </div>
    </template>    
    
    <script>
    import Child from './Child';
    
    export default {
        components: {
            Child
        },
        methods: {
            handleClick() {
            	//子组件$on中的名字
                this.$refs.child.$emit("childFun")    
            },
        },
    }
    </script>
    

两种实现方式效果一致。

调用方法前:在这里插入图片描述
调用方法后:
在这里插入图片描述
在这里插入图片描述

子组件调用父组件中的事件方法
  1. 直接在子组件中通过 this.$parent 来调用父组件的方法

    // Father.vue
    <template>
      <div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto" >
        我是父组件
        <Child></Child>
        <div style="color: red"> {{ msg }} </div>
      </div>
    </template>
    <script>
      import Child from './Child';
      export default {
          data() {
              return {
                  msg: ''
              }
          },
        components: {
          Child
        },
        methods: {
          fatherMethod() {
            console.log('我的父组件中的方法');
            this.msg = '我的方法被子组件调用了';
          }
        }
      };
    </script>
    
    // Child.vue
    <template>
      <div style="border: 1px solid black; width: 150px; margin: 10px auto">
        我是子组件
        <button @click="childMethod">点击调用父组件方法</button>
      </div>
    </template>
    <script>
      export default {
        methods: {
          childMethod() {
            this.$parent.fatherMethod();
          }
        }
      };
    </script>
    
  2. 在子组件里用 $emit 向父组件触发一个事件,父组件监听这个事件(推荐使用)

    // Father.vue
    <template>
      <div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto" >
        我是父组件
        <Child @fatherMethod="fatherMethod"></Child>
        <div style="color: red"> {{ msg }} </div>
      </div>
    </template>
    <script>
      import Child from './Child';
      export default {
          data() {
              return {
                  msg: ''
              }
          },
        components: {
          Child
        },
        methods: {
          fatherMethod() {
            console.log('我的父组件中的方法');
            this.msg = '我的方法被子组件调用了';
          }
        }
      };
    </script>
    

    子组件可以使用 $emit 触发父组件的自定义事件。

    // Child.vue
    <template>
      <div style="border: 1px solid black; width: 150px; margin: 10px auto">
        我是子组件
        <button @click="childMethod">点击调用父组件方法</button>
      </div>
    </template>
    <script>
      export default {
        methods: {
          childMethod() {
            // fatherMethod父组件方法
            this.$emit('fatherMethod'); 
          }
        }
      };
    </script>
    
  3. 父组件把方法传入子组件中,在子组件里直接调用这个方法:

    // Father.vue
    <template>
      <div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto" >
        我是父组件
        <Child :fatherMethod="fatherMethod"></Child>
        <div style="color: red"> {{ msg }} </div>
      </div>
    </template>
    <script>
      import Child from './Child';
      export default {
          data() {
              return {
                  msg: ''
              }
          },
        components: {
          Child
        },
        methods: {
          fatherMethod() {
            console.log('我的父组件中的方法');
            this.msg = '我的方法被子组件调用了';
          }
        }
      };
    </script>
    

    父组件可以将事件绑定到子组件标签上,子组件使用 props 接收父组件的事件。

    // Child.vue
    <template>
      <div style="border: 1px solid black; width: 150px; margin: 10px auto">
        我是子组件
        <button @click="childMethod">点击调用父组件方法</button>
      </div>
    </template>
    <script>
      export default {
        props: {
          fatherMethod: {
            type: Function,
            default: null
          }
        },
        methods: {
          childMethod() {
            if (this.fatherMethod) {
              this.fatherMethod();
            }
          }
        }
      };
    </script>
    

以上三种实现方式效果一致。

调用方法前:在这里插入图片描述
调用方法后:
在这里插入图片描述


四、总结

至此,Vue 父子组件之间大部分的操作都涉及到了,我们在程序的开发过程中对于该部分内容可以游刃有余了。

之前还写过一篇关于微信小程序的父子组件传值通信与事件触发 的文章,感兴趣的小伙伴可以前往查看。

希望以上内容可以帮助到大家。有任何问题欢迎讨论留言。

各位 加油!

Logo

前往低代码交流专区

更多推荐