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

红太狼 2022-11-15 11:54 177阅读 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 条评论，177人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

先看代码： 1、父组件： <template> <div> <div v-if="!userShow"> 父组件内容区

￡神魔★判官ぃ/ 2022年04月17日 04:59/ 0 赞/ 392 阅读

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

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

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

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

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

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

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

子组件 props: { props:['childdata'], // 定义在父组件中的变量 }, me

太过爱你忘了你带给我的痛/ 2021年09月15日 12:18/ 0 赞/ 557 阅读

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

子组件 -------------------- <template> <div class="timeline" > <div v-for=" data in c

以你之姓@/ 2021年09月15日 12:12/ 0 赞/ 585 阅读