Vue崇尚单向数据流，本来不应该直接修改的，.sync这个黑科技可以直接改

 <navBar :names.sync="names">  
   </navBar>

 //编译时会被扩展为
<navBar :names="names"  @update:names="val => names = val"></navBar>

  data() {
    return {
    names:'这是你的名字'
    }
  },
import navBar from '../../components/navbar/navBar'

子组件

<button @click="change()">修改</button>
 props:['names'],
methods:{
 change(){
 this.$emit("update:names","这是新的名字")
  },
}

没点击时候

点击后