理解vue中的.sync和.$emit

在Vue中，.sync是一个修饰符，它可以让父子组件之间的数据双向绑定变得更简单。当你在子组件中改变一个绑定到prop的值时，这个变化也会同步到父组件中的数据。

$emit是一个实例方法，它允许一个组件触发事件，这可以让子组件与父组件通信。

.sync 使用示例

父组件：

<template>
  <child :foo.sync="parentData" />
</template>
 
<script>
import Child from './Child.vue';
 
export default {
  components: { Child },
  data() {
    return {
      parentData: 'initial value'
    };
  }
};
</script>

子组件：

<template>
  <button @click="changeFoo">Change foo</button>
</template>
 
<script>
export default {
  props: {
    foo: String
  },
  methods: {
    changeFoo() {
      // 这将同步更新父组件的parentData
      this.$emit('update:foo', 'new value');
    }
  }
};
</script>

在上面的例子中，当在子组件中点击按钮时，会触发changeFoo方法，然后通过this.$emit('update:foo', 'new value')发送一个事件，这个事件会更新父组件中绑定的foo。

$emit 使用示例

子组件：

<template>
  <button @click="sendToParent">Send to Parent</button>
</template>
 
<script>
export default {
  methods: {
    sendToParent() {
      // 这将触发一个事件，并可选地传递数据到父组件
      this.$emit('custom-event', 'some data');
    }
  }
};
</script>

父组件：

<template>
  <child @custom-event="receiveFromChild" />
</template>
 
<script>
import Child from './Child.vue';
 
export default {
  components: { Child },
  methods: {
    receiveFromChild(data) {
      console.log(data); // 将输出: 'some data'
    }
  }
};
</script>

在这个例子中，当在子组件中点击按钮时，会触发sendToParent方法，然后通过this.$emit('custom-event', 'some data')发送一个事件到父组件，父组件通过监听custom-event事件来接收数据。