vue中.sync的使用详解

vue中.sync的使用详解

1. 父子组件传值

在Vue中，子父组件最常用的通信方式就是通过props进行数据传递，props值只能在父组件中更新并传递给子组件，在子组件内部，是不允许改变传递进来的props值，这样做是为了保证数据单向流通。但有时候，我们需要在子组件内部改变props属性值并更新到父组件中，需要用到.$emit来传递属性值

代码

//===================================父组件

<template>
  <div>
    <Son :title="title" @update:title="title = $event" />
  </div>
</template>

<script>
import Son from "./Son"; 
export default {
  name: "Father",
  components: {
    Son,
  },
  data() {
    return {
      title: "我是标题",
    };
  },
};
</script>

//===================================子组件
<template>
  <div class="son">
    <h1>{{ title }}</h1>
    <p></p>
    <div class="btnGroup">
      <Button type="primary" @click="updateTitle">修改标题</Button> 
    </div>
  </div>
</template>

<script>
export default {
  name: "Son",
  props: {
    title: {
      type: String,
    },
  },
  data() {
    return {};
  },
  methods: {
    updateTitle() {
      this.$emit("update:title", "新标题");
    },
  },
};
</script>

2. .sync修饰符

:title.sync就是:title="title" @update:title="title= $event"的缩写。

注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”title + ‘!’” 是无效的)。

//===================================父组件
<template>
  <div>
    <Son :title="title" @update:title="title = $event" />
    <Son :title.sync="title" />
    //两种写法效果一致
  </div>
</template>

效果

当用一个对象同时设置多个 prop 的时候，也可以将这个 .sync 修饰符和 v-bind 配合使用<Son v-bind.sync="doc" />

这样会把 doc 对象中的每一个 property (如 title) 都作为一个独立的 prop 传进去，然后各自添加用于更新的 v-on 监听器。

代码

//===================================父组件
<template>
  <div>
    <Son v-bind.sync="doc" />
  </div>
</template>

<script>
import Son from "./Son";
export default {
  name: "Father",
  components: {
    Son,
  },
  data() {
    return {
      doc: {
        title: "我的标题",
        content: "我的内容",
      },
    };
  },
};
</script>

//===================================子组件
<template>
  <div class="son">
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
    <div class="btnGroup">
      <Button type="primary" @click="updateTitle">修改标题</Button>
      <Button type="primary" @click="updateContent">修改内容</Button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Son",
  props: {
    title: {
      type: String,
    },
    content: {
      type: String,
    },
  },
  methods: {
    updateTitle() {
      this.$emit("update:title", "新标题");
    },
    updateContent() {
      this.$emit("update:content", "新内容");
    },
  },
};
</script>

效果