【Vue3 从入门到实战进阶式掌握完整知识体系】014-探索组件的理念：父子组件如何通过事件进行通信

阳光穿透心脏的1/2处 2023-10-03 09:34 3阅读 0赞

### 文章目录 ###

*   *  5、父子组件如何通过事件进行通信
     *   *  子组件调用的方法让父组件处理
         *  运行结果
         *  子组件调用父组件的方法并传参数
         *  运行结果
         *  在子组件中计算出来后上传给父组件参数
         *  运行结果
         *  校验子组件对外触发的事件
         *  运行结果
         *  更多的校验
         *  运行结果
         *  父子组件之间的”双向绑定“
         *  运行结果
         *  自定义modelValue
         *  运行结果
     *  参考文章

## 5、父子组件如何通过事件进行通信 ##

### 子组件调用的方法让父组件处理 ###

> 子组件调用父组件的方法来改变父组件的数据。子组件无法改变父组件传过来的数据，可以通过此方法请求父组件来进行改变！

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
          
        data(){
          
          return{
          
            count: 1
          }
        },
        methods:{
          
          // 在这里写一个 handleAddOne() 方法
          handleAddOne(){
          
            this.count ++;
          }
        },
        // 父组件监听子组件要调用的方法，指向一个方法
        // 注意这里的 addOne 最好写成 add-one
        template: `
            <div>
              <test :count="count" @add-one="handleAddOne()" />
            </div>
        `
      });
    
      
      app.component('test',{
          
        props:['count'],
        methods:{
          
          // 我们知道在这里我们不能修改 count 的值，因为它来自父组件
          // 但有时候我们确实需要修改这个值，我们就告诉父组件让父组件修改它
          // 也就是子组件告诉父组件自己想要调用一个方法
          // 注意，这里的 addOne 不能带 () 括号
          addOne(){
          
            this.$emit('addOne')
          }
        },
        template: `
            <div @click="addOne()">{
           {count}}</div>
        `
      })
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210613145446569.png][]

### 子组件调用父组件的方法并传参数 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
          
        data(){
          
          return{
          
            count: 1
          }
        },
        methods:{
          
          // 在这里写一个 handleAdd() 方法
          handleAdd(param){
          
            this.count += param;
          }
        },
        // 父组件监听子组件要调用的方法，指向一个方法
        // 注意这里的 handleAdd 不能带 () ，因为带括号就意味着明确没有传参数
        template: `
            <div>
              <test :count="count" @add="handleAdd" />
            </div>
        `
      });
    
      
      app.component('test',{
          
        props:['count'],
        methods:{
          
          // 我们知道在这里我们不能修改 count 的值，因为它来自父组件
          // 但有时候我们确实需要修改这个值，我们就告诉父组件让父组件修改它
          // 也就是子组件告诉父组件自己想要调用一个方法
          // 注意，这里的 add 不能带 () 括号
          // 可以传多个参数，父组件事件中使用对应数量的参数接收即可
          add(){
          
            this.$emit('add', 5)
          }
        },
        template: `
            <div @click="add()">{
           {count}}</div>
        `
      })
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210613150236756.png][]

### 在子组件中计算出来后上传给父组件参数 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
          
        data(){
          
          return{
          
            count: 1
          }
        },
        methods:{
          
          // 在这里写一个 handleAdd() 方法
          handleAdd(param){
          
            this.count = param;
          }
        },
        // 父组件监听子组件要调用的方法，指向一个方法
        // 注意这里的 handleAdd 不能带 () ，因为带括号就意味着明确没有传参数
        template: `
            <div>
              <test :count="count" @add="handleAdd" />
            </div>
        `
      });
    
      
      app.component('test',{
          
        props:['count'],
        methods:{
          
          // 我们知道在这里我们不能修改 count 的值，因为它来自父组件
          // 但有时候我们确实需要修改这个值，我们就告诉父组件让父组件修改它
          // 也就是子组件告诉父组件自己想要调用一个方法
          // 注意，这里的 add 不能带 () 括号
          add(){
          
            this.$emit('add', this.count + 3)
          }
        },
        template: `
            <div @click="add()">{
           {count}}</div>
        `
      })
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210613150548226.png][]

### 校验子组件对外触发的事件 ###

> 在子组件里面写一个 emits: \[‘方法名’\] 来实现校验，因为当子组件里面的内容太多的话就影响可读性，把对外触发的事件全写在这里面有助于阅读！

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
          
        data(){
          
          return{
          
            count: 1
          }
        },
        methods:{
          
          handleAdd(param){
          
            this.count = param;
          }
        },
        template: `
            <div>
              <test :count="count" @add="handleAdd" />
            </div>
        `
      });
    
      
      app.component('test',{
          
        props:['count'],
        // 在这里写一个 add 不会报错
        // 但没有写 add 而是写了一个 addOne 就会警告
        // 如果存在 emits 属性，那么对外触发的时候都要写进来，否则会警告
        emits: ['addOne'],
        methods:{
          
          add(){
          
            this.$emit('add', this.count + 3)
          }
        },
        template: `
            <div @click="add()">{
           {count}}</div>
        `
      })
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210613154043173.png][]

### 更多的校验 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
          
        data(){
          
          return{
          
            count: 1
          }
        },
        methods:{
          
          handleAdd(param){
          
            this.count = param;
          }
        },
        template: `
            <div>
              <test :count="count" @add="handleAdd" />
            </div>
        `
      });
    
      
      app.component('test',{
          
        props:['count'],
        // 在这里写一个 add 不会报错
        // 但没有写 add 而是写了一个 addOne 就会警告
        // 如果存在 emits 属性，那么对外触发的时候都要写进来，否则会警告
        emits: {
          
          // 检验参数
          add: (count) => {
          
            if(count > 0){
          
              return true;
            }else{
          
              return false;
            }
          }
        },
        methods:{
          
          add(){
          
            this.$emit('add', this.count + 3)
          }
        },
        template: `
            <div @click="add()">{
           {count}}</div>
        `
      })
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210613154340970.png][]

### 父子组件之间的”双向绑定“ ###

### 运行结果 ###

![image-20210613154959373.png][]

### 自定义modelValue ###

### 运行结果 ###

![image-20210613155101659.png][]

## 参考文章 ##

Vue3中父子组件相互触发方法  
https://blog.csdn.net/weixin\_45122120/article/details/119916012

[image-20210613145446569.png]: https://img-blog.csdnimg.cn/img_convert/2ac56201199dfb1cba000e067143e295.png
[image-20210613150236756.png]: https://img-blog.csdnimg.cn/img_convert/b1482ef25ce496e87610bf271d1cd7d6.png
[image-20210613150548226.png]: https://img-blog.csdnimg.cn/img_convert/caa9c91964e1fd8a7ce443349f94e030.png
[image-20210613154043173.png]: https://img-blog.csdnimg.cn/img_convert/0da988a3e9b7a3ce1e264e04dc7a9e54.png
[image-20210613154340970.png]: https://img-blog.csdnimg.cn/img_convert/eaeb08bb43c0f5c87081abf335b54de7.png
[image-20210613154959373.png]: https://img-blog.csdnimg.cn/img_convert/7712f7784943f6a001e8200c75c32f89.png
[image-20210613155101659.png]: https://img-blog.csdnimg.cn/img_convert/4eb52ea34be98c2058ea7834fb6d0c01.png