vue父子组件传值：子修改父

傷城~ 2023-10-02 17:26 12阅读 0赞

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K6w_size_8_color_FFFFFF_t_70_g_se_x_16]

### components/ZXL.vue ###

<template>
      <div>
        <h1>学亮编程手记，我接收到的父组件的值是：{
       {msbValue}}  {
       {valueB}}
        {
       {valueC}}</h1>
        <button @click="add">按我加1</button>
      </div>
    </template>
    <script>
    export default {
          
      // 罗列父组件传进的属性值
      props:{
          
      msbValue: Number,
        valueB: Number,
        valueC: Number
      },
      data() {
          
       return {
          
         
       }
      },
      methods:{
          
        add() {
          
          this.$emit("add")
        }
      }
    }
    </script>
    <style>
      
    </style>

### App.vue ###

<template>
      <div>
        <zxl @add="sumNum" :msb-value='a' :value-b="b" :value-c="c"></zxl>
      </div>
    </template>
    
    <script>
    // 引入组件
    import zxl from './components/ZXL.vue'
    
    export default {
          
      // 注册组件
      components:{
          
        zxl
      },
      data(){
          
        return {
          
          a: 100,
          b: 200,
          c: 300
        }
      },
      methods: {
          
          sumNum(){
          
            this.a++
          }
      }
    }
    </script>
    
    <style>
    
    </style>

![在这里插入图片描述][ba1641c14a5543a78c83e581d7a20fc1.png]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K6w_size_8_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/b2b28afe83d1423fab4190f0729e8672.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K6w,size_8,color_FFFFFF,t_70,g_se,x_16
[ba1641c14a5543a78c83e581d7a20fc1.png]: https://img-blog.csdnimg.cn/ba1641c14a5543a78c83e581d7a20fc1.png