vue父传子，子传父

vue父传子，子传父，相当于v-model用.sync

在父组件里面写.sync,在子组件里面写this.$emit('update:childFn',val)

父组件

<template>
  <div>
    父组件：{{text}} 
    <br />
    <button @click="fachange">父改变</button>
    <Child :childFn.sync="text"></Child>
    
  </div>
</template>
<script>
  import Child from './child.vue'
export default {
  name:'Child-item',
    data(){
      return {
        text:'heihei'
      }
    },
  components:{
    Child
  },
  methods:{
    fachange(){
      this.text='123';
    }
  }
}
</script>

子组件

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

<script>
    export default {
      name:'Child-item2',
      data(){
        return{
        }
      },
      watch:{
        text(val){
          this.newtext = val;   //监听text，把text赋给newtext
        }
      },
      computed:{
        newtext:{
          get(){
            return this.childFn
          },
          set(val){
            this.$emit('update:childFn',val)
          }
          
        }
      },
      methods:{
        submit () {
          this.newtext = 'haha'
        }
      },
      props:{
        childFn:{
           type:String,
           default:'hello world'
         }
      }
    }
</script>