vue .sync 修饰符

.sync修饰符-子组件改变父组件的状态

子组件向父组件传递参数通过事件接口实现 $on(),$emit()，
.sync修饰符与$on(),$emit()区别

1. .sync修饰符是改变父组件的状态，当子组件与父组件公用状态的时候也会被改变，可以通过从新赋值的形式将父组件传给子组件的状态保存 达到只改父组件视图的效果，
2. $on(),$emit() 只是单独起到传递参数的作用，
   代码如下：

parent.vue 父组件内容


<template lang="pug">
.wrap
  .div {{ msg }}
  br
  br
  br
  children(:msg.sync="msg")

</template>

<script>
import children from './children'

export default {
  name: 'HelloWor',
  data () {
    return {
      msg: '这个是父组件的-prop-数据'
    }
  },
  components: {
    children
  }
}
</script>

<style scoped>
.wrap {
}

</style>

---

实现的效果只是：当点击按钮的时候子组件改父组件的状态，子组件也随着副组件状体的改变而改变，

children.vue 子组件的内容


<template lang="pug">
.wrapper
  .div 以下是子组件的内容
  button.button(@click="nihao")
  .data {{ msg }}

</template>

<script>
export default {
  props: ['msg'],
  data () {
    return {
      datail: '我是子组件的data',
      // 在这里将传过来的状态保存导name属性里 在视图上显示name
      // 就可以解决子组件的状态不会随着父组件的状态改变而改变
      name: this.msg
    }
  },
  methods: {
    nihao () {
      this.$emit('update:msg', this.datail)
    }
  }
}
</script>

<style scoped>
.button {
  height: 60px;
  width:60px;
  background:#eeeeee;
}

</style>

---

.sync修饰符设置自动监听，子组件改变父组件状态

watch{}监听属性：

1. 对象类型，
2. 直接监听data里的状态，不需要this指定vue的状态，
3. 将属性设置为回调函数，参数代表变化的值，

代码如下

parent.vue 父组件的内容


<template lang="pug">
.wrap
  .div {{ msg }}
  br
  br
  br
  children(:msg.sync="msg")

</template>

<script>
import children from './children'

export default {
  name: 'HelloWor',
  data () {
    return {
      msg: '这个是父组件的-prop-数据'
    }
  },
  components: {
    children
  }
}
</script>

<style scoped>
.wrap {
}

</style>

---

children.vue 子组件的内容


<template lang="pug">
.wrapper
  .div 以下是子组件的内容
  button.button
  input(v-model="name")
  .div {{ name }}

</template>

<script>
export default {
  props: ['msg'],
  data () {
    return {
      datail: '我是子组件的data',
      name: this.msg
    }
  },
  watch: {
    // 监听属性里name直接代表data里的状态，不需要this指定
    name (value) {
      this.$emit('update:msg', value)
    }
  }
}
</script>

<style scoped>
.button {
  height: 60px;
  width:60px;
  background:#eeeeee;
}

</style>