vue .sysc

初学vue，今天看代码的时候看见了.sysc，刚刚开始有点不理解这是干什么的，后来查阅了下资料，发现sysc能够实现子组件给父组件传值，非常简单，在复用组件的时候非常好用，下面我用一个demo来说明.sysc的用法

定义一个组件

<template>
    <div>
        <input type="text" v-model="msg">
        <input type="button" value="传值" @click="submit">
    </div>
</template>

<script>
export default {
    data(){
        return{
            msg:''
        }
    },
    methods:{
        //这个方法给父组件传值
        submit(msg){
            this.$emit("update:msg",this.msg)
        }
    }
}
</script>

把组件加入一个父组件

<template>
<div>
    //把父组件的mainMsg和子组件的msg绑定，当调用子组件的submit()方法时同步
  <commentbox :msg.sync="mainMsg"></commentbox>
  <input type="text" v-model="mainMsg">
</div>

</template>

<script>
  import commentbox from '@/components/CommentBox'
  export default {
    name: 'app',
    data () {
      return {
      //用mainMsg接收子组件传来的信息
        mainMsg:''
      }
    },
    components:{
      commentbox
    }
  }
</script>

传值前
传值后