.sync修饰及props对象方式传参

父组件

<template>
  <div>
    {{message}}
    <!-- <children :message='message' @update:message='handel'/> -->
    <children :message.sync="message"/> //简化上面的写法 update:是固定写法
  </div>
</template>

<script>
import children from './children.vue'
export default {
  name: '',
  data() {
    return {
      message:'消息1'
    }
  },
  components: {
    children
  },
  methods:{
    handel(value){
      this.message=value
    }
  }
}
</script>


<style scoped>
</style>

子组件

<template>
  <div class="container">
    <div class="children">{{ message }}</div>
    <div class="right" >
      <button @click="handSync">变化</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: 'children'
    }
  },
  // props:['message'],
  name: '',
  methods:{
    handSync(){
      this.$emit('update:message',this.message+'1')
    }
  }
}
</script>

<style lang='less' scoped>
.container {
    //响应式布局，左侧固定右侧响应式的两种方式 ,浮动 or Flex
  display: flex;
  .children {
    width: 2rem;
    height: 80px;
    border: 1px solid red;
    // float:left
  }
  .right {
    flex: 1;
    // margin-left:2rem;
    height: 80px;
    border: 1px solid black;
  }
}
</style>