Vue的踩坑集? —— 父组件传值给子组件，子组件改变值后再传回去

Posted 2020-11-19 tanghm

一个基本的父传子demo

parent.vue

<template>
  <div>
    <Child text="hi"></Child>
  </div>
</template>

<script>
  import Child from ‘./child.vue‘
export default {
  components:{
    Child
  }
}

 

child.vue

<template>
  <div>
    {{text}}
  </div>
</template>

<script>
    export default {
       props:{
         text:{
           type:String,
           default:‘hello world‘
         }
       }
    }
</script>

 （重点已标记）

 

那么如果在子组件中改变从父组件传过来的值并且再传回去呢~??

parent.vue

 

<template>
  <div>
    父组件：{{text}}
    <Child @onchange="onchange" :text="text"></Child>
  </div>
</template>

<script>
  import Child from ‘./child.vue‘
export default {
    data(){
      return {
        text:‘heihei‘
      }
    },
  components:{
    Child
  },
  methods:{
    onchange(val){
      this.text=val;
    }
  }
}
</script>

 

child.vue

<template>
  <div>
    子组件：{{newtext}}<br>
    <button @click="commit">改变值</button>
  </div>
</template>

<script>
    export default {
      data(){
        return{
          newtext:this.text
        }
      },
      watch:{
        text(val){
          this.newtext = val;   //监听text，把text赋给newtext
        },
        newtext(val){
          this.$emit(‘onchange‘,val)   //传给父组件
        }
      },
      methods:{
        commit(){
          this.newtext = ‘haha‘
        }
      },
      props:{
         text:{
           type:String,
           default:‘hello world‘
         }
      }
    }
</script>

以上！