子组件代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
    <input v-model="value">
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            value: ''
        }
    },
    watch: {
        value(newValue, oldValue) {
            this.$emit('update:title', newValue)
        }
    }
}
</script>

父组件代码

  1. 某些情况下，我们需要子组件改变某个值的时候，父组件的值也更改，常规的实现方法如下：

    1
    2
    3
    4
    5
    // 父组件中有个 title 的值传递到子组件中
    <text-document
      :title="title"
      @update:title="title = $event"
    ></text-document>

  2. 通过 .sync 修饰符，可以简写父组件，子组件中增加的方法不变：

    1
    2
    // 父组件写法
    <text-document :title.sync="title"></text-document>