Vue 父子组件传值sync修饰符

子组件通过props自定义属性接受父组件传过来的值，只读但不能直接修改数据，再通过emit自定义事件修改父组件的数据。

v-bind中

1.传值单个属性

1.1普通形式

父组件：

<template>
  <div>
    <Son 
       :sonmsg="msg" 
       @Sonchange="changeMsg"> 
    </Son>
  </div>
</template>

<script>
import Son from './Son.vue'
export default {
  components: {
    Son
  },
  data () {
    return {
      msg: '英子开门，我是爹地'
    }
  },
  methods: {
    // 通过自定义事件来修改父组件的数据  给其赋新值
    changeMsg (val) {
      this.msg = val
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

子组件:

<template>
  <div>
    <h3>使用父的数据:{{ sonmsg }}</h3>
    <button @click="change">修改父传来的值</button>
  </div>
</template>

<script>
export default {
  props: {
    sonmsg: {
      type: String
    }
  },
  data () {
    return {
      newMsg: '子组件的数据'
    }
  },
  methods: {
    change () {
      // 通过自定义事件去修改父组件的数据
      this.$emit('Sonchange', this.newMsg)
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

1.2使用sync修饰符

父组件直接使用.sync，无需再@Sοnchange=“changeMsg”。

<template>
  <div>
    <Son 
       :sonmsg.sync="msg"> 
    </Son>
  </div>
</template>

<script>
import Son from './Son.vue'
export default {
  components: {
    Son
  },
  data () {
    return {
      msg: '英子开门，我是爹地'
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

子组件：
固定使用 update:xxx
中间不能间隔空格！！！！！！
中间不能间隔空格！！！！！！
中间不能间隔空格！！！！！！ （格式化代码的时候注意了）

子组件的sonmsg的变化 同步改变到:sonmsg.sync="msg"父组件的msg数据

<template>
  <div>
    <h3>使用父的数据:{{ sonmsg }}</h3>
    <button @click="change">修改父传来的值</button>
  </div>
</template>

<script>
export default {
  props: {
    sonmsg: {
      type: String
    }
  },
  data () {
    return {
      newMsg: '子组件的数据'
    }
  },
  methods: {
    change () {
     // 子组件的sonmsg的变化 同步改变到:sonmsg.sync="msg"父组件的msg数据
      this.$emit('update:sonmsg', this.newMsg)
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

2.传值是对象

2.1普通形式

父组件：

<template>
  <div>
    <Son 
       :sonname="msg.name"
       :soncontent="msg.content"
       :sonstate="msg.state"
       @SonNameChange="changename"
       @SonTextChange="changetext"
       @SonStateChange="changstate"> 
    </Son>
  </div>
</template>

<script>
import Son from './Son.vue'
export default {
  components: {
    Son
  },
  data () {
    return {
      msg:{
        name:'爹地',
        content:'英子开门',
        state:'在家'
      }
    }
  },
  methods:{
    changename(val){
      this.msg.name = val
    },
    changetext(val){
      this.msg.content = val
    },
    changstate(val){
      this.msg.state = val
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

子组件：

<template>
  <div>
    <h3>父组件名字:{{ sonname }}</h3>
    <h3>父组件内容：{{soncontent}}</h3>
    <h3>{{sonstate}}</h3>
    <button @click="change">修改父传来的值</button>
  </div>
</template>

<script>
export default {
  props: {
    sonname: {
      type: String
    },
    soncontent:{
      type:String
    },
    sonstate:{
      type:String
    }
  },
  data () {
    return {
      newName: '妈咪',
      newText:'该回家写作业了英子！',
      newState:'游乐场'
    }
  },
  methods: {
    change () {
      this.$emit('SonNameChange', this.newName)
      this.$emit('SonTextChange', this.newText)
      this.$emit('SonStateChange', this.newState)
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

2.2使用sync修饰符：

父组件：

<template>
  <div>
    <Son v-bind.sync="msg"> </Son>
  </div>
</template>

<script>
import Son from './Son.vue'
export default {
  components: {
    Son
  },
  data () {
    return {
      msg: {
        name: '爹地',
        content: '英子开门',
        state: '在家'
      }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

子组件：

<template>
  <div>
    <h3>父组件名字:{{ name }}</h3>
    <h3>父组件内容：{{ content }}</h3>
    <h3>{{ state }}</h3>
    <button @click="change">修改父传来的值</button>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String
    },
    content: {
      type: String
    },
    state: {
      type: String
    }
  },
  data () {
    return {
      newName: '妈咪',
      newText: '该回家写作业了英子！',
      newState: '游乐场'
    }
  },
  methods: {
    change () {
      this.$emit('update:name', this.newName)
      this.$emit('update:content', this.newText)
      this.$emit('update:state', this.newState)
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

3 .sync原理

1.2使用sync修饰符的原理：
父组件：
:sonmsg.sync=“msg” 等价于:sonmsg=“msg” @update:sonmsg=“changeMsg”
使用.sync就不需要单独绑定@update:属性="事件"了。
子组件不变。

<template>
  <div>
    <Son :sonmsg="msg" @update:sonmsg="changeMsg"> </Son>
  </div>
</template>

<script>
import Son from './Son.vue'
export default {
  components: {
    Son
  },
  data () {
    return {
      msg: '英子开门，我是爹地'
    }
  },
  methods: {
    changeMsg (val) {
      this.msg = val
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

4.v-model原理

v-model双向绑定原理为 :value + @input 事件。

<template>
  <div id="app">
    <div>
      <h3>双向绑定原理:{{msg}}</h3>
      <input type="text" 
         :value="msg" 
         @input="inputChange"  />
    </div>
    <div>
      <h3>v-model:{{message}}</h3>
      <input type="text" v-model="message" />
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: '实现双向绑定',
      message: '双向绑定'
    }
  },
  methods: {
    inputChange (e) {
      this.msg1 = e.target.value
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28