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

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

PS：已经更文多少天，N就写几。一定要写对文案，否则文章不计入在内；模板句子需要带超链接

展示：

一般修改父组件需要用$emit 如果不使用$emit 需要怎么修改呢？

 this.$emit('childValInput',this.childVal)

父组件：

this$: this,
test: '123456',

    components: {
        Test
    },

 <Test :holder="this$"/>

import Test from  '@/components/View/test'

子组件：

<template>
  <div>
    <!-- test 是父组件定义的数据 -->
    {{ holder.test }}

    <el-button @click="updateValue">修改父组件数据</el-button>
  </div>
</template>

<script>
export default {
  props: {
    holder: Object, //这是一个vueComponent实例,含义是持有当前组件的vue组件实例
  },
  methods: {
    updateValue() {
      this.holder.test = "被修改了";
    },
  },
};
</script>

<style lang="scss"  scoped>
</style>

子组件修改父组件传递过来的是可以修改的

测试：

大概意思是：避免直接改变属性，因为每当父组件重新渲染时，该值将被覆盖。相反，使用基于属性值的数据或计算属性。通过props传递给子组件的text，不能在子组件内部修改props中的text值。

但是呢 如果是复杂的数据类型是可以的

是没有报错的

父组件:

 <Test :holder="this$" :obj="obj" :text="text"/>
 
 
 obj:{
      name:"lulu",
      age:123
},
 this$: this,
test: '123456',
text:"text",

子组件:

<template>
  <div>
    <!-- test 是父组件定义的数据 -->
    {{ holder.test }}

    <el-button @click="updateValue">修改父组件数据</el-button>

    <div v-for="(value,key,index) in obj" :key="index">
        {{value}}-{{key}}-{{index}}
    </div>
    <el-button @click="updateObj">修改父组件obj复杂数据</el-button>

    <div>text: {{text}}</div>
    <el-button @click="updateText">修改父组件text简单数据</el-button>
  </div>
</template>

<script>
export default {
  props: {
    holder: Object, //这是一个vueComponent实例,含义是持有当前组件的vue组件实例
    obj:Object,
    text:String
  },

  methods: {
    updateValue() {
      this.holder.test = "被修改了";
    },
    updateObj(){
      this.obj.name ="被修改了";
      this.obj.age = '457457';
    },
    updateText(){
        this.text = "杀鸡儆猴"
    }
  },
};
</script>

<style lang="scss"  scoped>
</style>

参考： blog.csdn.net/weixin_4473…