vue父子组件通信-用.sync修饰符。

原始方法

App.vue

<template>
  <div id="app">
    <Father :age="age" @setage="setAge"/>
  </div>
</template>

<script>
import Father from './components/Father.vue'

export default {
  data(){
    return{
      age:"18"
    }
  },
  name: 'app',
  components: {
    Father
  },
  methods:{
    setAge(res){
        this.age = res;
    }
  }
  
}
</script>

<style>

</style>

Father.vue

<template>
  <div class="hello">
    {{age}}
  </div>
</template>

<script>
export default {
  name: 'Father',
  props:{
    age:String
  },
  methods:{

  },
  mounted(){
    this.$emit("setage","123");
  }
  
}
</script>

<style scoped>

</style>

使用.sync修饰符

这里注意我们的事件名称被换成了update:age

<template>
  <div class="hello">
    {{age}}
  </div>
</template>

<script>
export default {
  name: 'Father',
  props:{
    age:String
  },
  methods:{

  },
  mounted(){
    this.$emit("update:age","123");
  }
  
}
</script>

<style scoped>

</style>