vue sync修饰符,父子传值的使用

vue项目中我们先定义一个父组件 index.vue 和 子组件 son.vue 用来举例

父组件 index.vue

<template>
  <div>
    <son :msg="msg" @change="msg = $event" />
    //上面的代码可以通过下面这行简化 用了.sync
    <son :msg.sync="msg" :name="content.name" :age="content.age" />
    //上面的代码又可以用 v-bind.sync简化, content不是直接传递整个对象 而是将对象的属性 name age 分别传给子组件
    <son :msg.sync="msg"  v-bind.sync="content" />
  </div>
</template>

<script>
import son from './son'
export default {
  components: {
    son
  },
  data() {
    return {
      msg: '我是标题',
      content: {
        name: '张三',
        age: 18
      }
    }
  }
}
</script>

子组件 son.vue

<template>
  <div id="son">
      {{msg}}
      {{age}}
      {{name}}
      <button @click="changeContent">点击改变</button>
  </div>
</template>

<script>
import { number } from 'echarts'
export default {
    props: {
        msg:{
            type:String,
        },
        age:{
            type:Number
        },
        name:{
            type:String
        }

    },
    methods: {
        changeContent(){
            // this.msg = '内容被改变了'  // 不能直接改变父组件传送过来的内容  要遵循单向传递
            this.$emit('change','内容被改变了')
            this.$emit('update:msg','内容被改变了')
            this.$emit('update:age',27)
            this.$emit('update:name','gyb')
        }
    }
}
</script>