vue子组件如何修改父组件值

红太狼 2022-11-15 11:54 186阅读 0赞

子组件直接修改父组件的值的话会提示错误，如下：

![20210401083116163.png][]

父组件：

<template>
      <div class="home">
        <page1 :msg.sync="msg"></page1>
      </div>
    </template>
    
    <script>
    import page1 from "@/components/page1.vue";
    export default {
      name: "Home",
      components: {
        page1
      },
      data() {
        return {
          msg: 'old'
        };
      },
      methods: {
      
      },
    };
    </script>
    <style lang="scss">
      
    </style>

.sync是一个语法糖

<page1 :msg.sync="msg"></page1>
     
    <page1 :msg="msg" @update:msg="val => msg = val"></page1>

子组件：

<template>
      <div class="page1">
        {
       {msg}}
      </div>
    </template>
    
    <script>
    export default {
      name: "page1",
      components: {
      },
      props: ['msg'],
      data() {
        return {
        };
      },
      mounted() {
        this.$emit('update:msg', 'new')
      },
      methods: {
    
      },
    };
    </script>

更新方式，这样就不会报错

this.$emit('update:msg', 'new');

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyMjEyMA_size_16_color_FFFFFF_t_70][]

[20210401083116163.png]: /images/20221022/d65d4e3e0e854476b78c8551dc674d7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyMjEyMA_size_16_color_FFFFFF_t_70]: /images/20221022/69d649c32e124792b3756279424b173e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，186人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue中父组件如何控制子组件的值

系列文章目录 -------------------- 文章目录系列文章目录前言一、使用.sync修饰符二、使用自定义事件

待我称王封你为后i/ 2023年10月13日 02:49/ 0 赞/ 29 阅读

相关子组件修改父组件的属性值

父组件调用子组件 <base_picker v-show="show2" :sendList="show2" @sendMessage="messa

怼烎@/ 2023年10月11日 10:42/ 0 赞/ 67 阅读

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

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

傷城~/ 2023年10月02日 17:26/ 0 赞/ 30 阅读

相关 vue子组件修改父组件传递过来的值

把一个布尔值传递给子组件，然后，在子组件中修改该值，会报错 Avoid mutating a prop directly since the value will b

た入场券/ 2023年06月13日 08:54/ 0 赞/ 9 阅读

相关 vue.js----父组件向子组件传值，子组件执行父组件方法

1，父组件向子组件传值，可以是：在使用子组件的时候，将需要传递的数据，通过属性绑定的形式，传递给子组件；在子组件中通过props进行接收；可以是数组形式接收，props:\['

古城微笑少年丶/ 2023年06月08日 14:55/ 0 赞/ 27 阅读

相关 vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值

一、父组件调用子组件方法父组件代码 parent.vue <template> <div> <button @click="paren

﹏ヽ暗。殇╰゛Y/ 2023年06月01日 12:38/ 0 赞/ 32 阅读

相关 vue里面父组件如何修改子组件样式

文章目录一、去掉 scoped 二、混用本地和全局样式三、使用深度作用选择器在使用 vue 的开发中，我们有时会引用外部组件，包括 UI

骑猪看日落/ 2022年12月21日 10:59/ 0 赞/ 404 阅读

相关 vue子组件如何修改父组件值

子组件直接修改父组件的值的话会提示错误，如下： ![20210401083116163.png][] 父组件： <template> <div cl

红太狼/ 2022年11月15日 11:54/ 0 赞/ 187 阅读

相关 Vue.js 父组件向子组件传值和子组件向父组件传值

父组件向子组件传值 1. 组件实例定义方式，注意：一定要使用`props`属性来定义父组件传递过来的数据 <script> // 创建 Vue

た入场券/ 2022年03月16日 20:16/ 0 赞/ 411 阅读

相关 vue子组件向父组件传值

背景 vue实现数据交互之子组件向父组件传值，这里通过点击事件改变父组件的值方法子组件User.vue //点击hello users后改变父组件titl

傷城~/ 2021年12月12日 07:21/ 0 赞/ 461 阅读