Vue 进阶组件实战应用 -- 父子组件传值的应用实例（子父组件传值的两种触发方式）

超、凢脫俗 2023-10-02 15:31 8阅读 0赞

基础的子组件和父组件通信已经搞定了，可以看此博客 [父子组件传值基础应用][Link 1]  
**需求**  
现在需求是在一个父页面引用子组件，不只是要实现基本的父子组件传值。并且子组件给父组件传值的触发条件要在父页面触发。

目前小编采用的方式是使用ref 属性+this.emit 方法 ，在父页面调用子页面的方法结合this.emit方法实现。在父页面调用子页面的方法并且把子页面里的值通过父页面的自定义事件传递到父页面。

注意：先新建子页面，然后进行父子传值，在父页面注册子页面为组件

## 父->子传值 ##

父页面

<template>
      <div class="hello">
        <ChildComponents
         :msg="msgc">
         </ChildComponents>
        <button @click="send()">向子组件传值</button>
      </div>
    </template>
    
    <script>
    import ChildComponents from'./ChildComponents.vue'
    export default {
        
      name: 'HelloWorld',
      components: {
        
       'ChildComponents':ChildComponents
      },
       data () {
        
        return {
        
          msgc:''
        }
      },
      methods:{
        
        send(){
        
          this.msgc='来自HelloWorld父组件的值';
        }
      }
    }
    </script>
    
    
    <style scoped>
    h3 {
        
      margin: 40px 0 0;
    }
    ul {
        
      list-style-type: none;
      padding: 0;
    }
    li {
        
      display: inline-block;
      margin: 0 10px;
    }
    a {
        
      color: #42b983;
    }
    </style>

子页面

<template>
      <div>
         <div><h1>子组件的值</h1></div>
         <div>
           {
        {
        msg}}<br/>
         </div>
      </div>
    </template>
    
    <script>
     
    export default {
        
      name: 'test',
      components: {
        },
      props: {
        
        msg: String
      },
      data () {
        
        return {
        
          
        }
      } 
    }
    </script>
    <style   scoped>
    
    </style>

结果：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bq35LiW6KGM_size_20_color_FFFFFF_t_70_g_se_x_16]

## 子->父传值 ##

### 子页面触发 ###

父页面

<template>
      <div class="hello">
        <ChildComponents
         @sendMsg="sendMsg"
         :msg="msgc">
         </ChildComponents>
        <h1>父组件的值</h1><br/>
        {
        {
        msgp}}
        <button @click="send()">向子组件传值</button>
      </div>
    </template>
    
    <script>
    import ChildComponents from'./ChildComponents.vue'
    export default {
        
      name: 'HelloWorld',
      components: {
        
       'ChildComponents':ChildComponents
      },
       data () {
        
        return {
        
          msgc:'',
          msgp:'',
        }
      },
      methods:{
        
        sendMsg(data) {
        
          this.msgp=data;
        },
        send(){
        
          this.msgc='来自HelloWorld父组件的值';
        }
      }
    }
    </script>
    
    
    <style scoped>
    h3 {
        
      margin: 40px 0 0;
    }
    ul {
        
      list-style-type: none;
      padding: 0;
    }
    li {
        
      display: inline-block;
      margin: 0 10px;
    }
    a {
        
      color: #42b983;
    }
    </style>

子页面

<template>
      <div>
         <div><h1>子组件的值</h1></div>
         <div>
           {
        {
        msg}}<br/>
          <button @click="sendMsg()">向父组件传值</button>
         </div>
      </div>
    </template>
    
    <script>
     
    export default {
        
      name: 'test',
      components: {
        },
      props: {
        
        msg: String
      },
      data () {
        
        return {
        
          
        }
      },
      methods: {
        
        sendMsg() {
        
            //子页面的值推送到父页面的自定义事件里
           this.$emit('sendMsg',"来ChildComPonens自子组件的值")
        }
      }
      
    }
    </script>
    <style   scoped>
    
    </style>

结果：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bq35LiW6KGM_size_20_color_FFFFFF_t_70_g_se_x_16 1]

### 父页面触发 ###

父页面需要修改的地方

<ChildComponents
         @sendMsg="sendMsg"
         ref="chile"
         :msg="msgc">
         </ChildComponents>
        <h1>父组件的值</h1><br/>
        {
        {
        msgp}}
        <button @click="sendParnt()">子组件向父组件传值，父组件触发</button>
        //增加一个方法
         methods:{
        
        sendParnt() {
        
          this.$refs.chile.sendmsgP()
        }
      }

子组件只需要增加一个方法 sendmsgP 父页面可以通过ref 调用

methods: {
        
        sendMsg() {
        
           this.$emit('sendMsg',"来ChildComPonens自子组件的值")
        },
        sendmsgP(){
        
          this.sendMsg()
        }
      }

结果：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQXJjaGllX2phdmE_size_17_color_FFFFFF_t_70_g_se_x_16]

[Link 1]: https://kangshihang.blog.csdn.net/article/details/118444848
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bq35LiW6KGM_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/b0f134024b5f442083dcf3d906bd0fb3.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5bq35LiW6KGM,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bq35LiW6KGM_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/93a0b9ce3a6045768ea1848996a7f054.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5bq35LiW6KGM,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQXJjaGllX2phdmE_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/814a07c754b845efac93024f56233497.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAQXJjaGllX2phdmE=,size_17,color_FFFFFF,t_70,g_se,x_16