.sync子组件通过事件改变父组件值

        之前没用过这个修饰符,在使用elementui的时候看到props允许使用.sync修饰符,就开始找这个修饰符的作用。总结为：

        子组件props中的数据不可以在子组件内改变,代码会报错。但是props中获取的父组件值也是响应式的。所以改变父组件中的值就可以改变props中的值了。通过.sync修饰符可以通过书写子组件内的方法来改变父组件的值。

        父组件代码：

<template>
  <div>
    <div>父组件:{{numberssss}}</div>
    <ce-shi :number.sync="numberssss" />
  </div>
</template>

<script>
import ceShi from './ceshi'
export default {
  name: "login",
  components:{
    ceShi
  },
  data(){
    return{
      numberssss:123
    }
  },
  methods:{

  }
}
</script>

        子组件代码:

<template>
  <div>
    <div>子组件:{{number}}</div>
    <button @click="changes">变身</button>
  </div>
</template>

<script>
export default {
  name: "ceshi",
  props:{
    number:{}
  },
  methods:{
    changes(){
      this.$emit('update:number','变身完成')//触发事件.改变父组件中的值,但update后面写的是props中的新名字
    }
  }
}
</script>

<style scoped>

</style>

        效果:

(点击按钮前)(点击按钮后) 

        总结:不必动用vuex,以后自己封装组件的时候可以用。