通過本文給大家介紹vue 自定義組件 v-model雙向綁定、 父子組件同步通信的多種寫法，具體詳情如下所示：
父子組件通信，都是單項的，很多時候需要雙向通信。方法如下：
1、父組件使用：msg.sync="aa" 子組件使用$emit('update:msg', 'msg改變后的值xxx')
2、父組件傳值直接傳對象，子組件收到對象后可隨意改變對象的屬性，但不能改變對象本身。
3、父組件使用： v-model
第一種曾經被廢除過，由於維護成本的原因被刪掉，但經過證實，確實有存在的意義，又被加上。
第一種：
父組件：
|
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>
<aa class=
"abc"
:snycTest.sync=
"test"
></aa>
{{
'外面的值：'
+ test}}
<button @click=
"fn"
>
外面改變里面
</button>
</div>
</template>
<script>
import aa from
'./test.vue'
export
default
{
data () {
return
{
test:
''
}
},
methods: {
fn () {
this
.test += 1
}
},
components:{
aa
}
}
</script>
|
子組件：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<template>
<div>
<ul>
<li>{{
'里面的值：'
+ snycTest}}</li>
<button @click=
"fn2"
>里面改變外面</button>
</ul>
</div>
</template>
<script>
export
default
{
props: {
snycTest:
''
},
methods: {
fn2 () {
this
.$emit(
'update:snycTest'
,
this
.snycTest+1)
//這兒是關鍵 update:snycTest 自定義事件會告訴父組件將父組件的 test值改為this.snycTest+1，並傳回給子組件。
} } } </script>
|
v-model寫法一：
父組件：
|
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
|
<template>
<div>
<aa class=
"abc"
v-model=
"test"
></aa>
// 組件中使用v-model
{{
'外面的值：'
+ test}}
// 這兒試驗test與內部msg值為雙向綁定關系
<button @click=
"fn"
>
外面改變里面
</button>
</div>
</template>
<script>
import aa from
'./test.vue'
export
default
{
data () {
return
{
test:
''
}
},
methods: {
fn () {
this
.test += 1
}
},
components:{
aa
}
}
</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
|
<template>
<div>
<ul>
<li>{{
'里面的值：'
+ msg}}</li>
<button @click=
"fn2"
>里面改變外面</button>
</ul>
</div>
</template>
<script>
export
default
{
model: {
// 使用model， 這兒2個屬性，prop屬性說，我要將msg作為該組件被使用時（此處為aa組件被父組件調用）v-model能取到的值，event說，我emit ‘cc' 的時候，參數的值就是父組件v-model收到的值。
prop: 'msg
',
event: '
cc
'
},
props: {
msg: '
'
},
methods: {
fn2 () {
this.$emit('
cc',
this
.msg+2)
}
}
}
</script>
|
v-model寫法二
父組件 <aa class="abc" v-model='test' ></aa> 。
子組件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<template>
<div>
<ul>
<li>{{
'里面的值：'
+ value}}</li>
// 組件使用時有v-model屬性，value初始傳的‘what' 不會被渲染，而是v-model綁定的test值被渲染，這兒value會被重新賦值為v-model綁定的test的值。
<button @click=
"fn2"
>里面改變外面</button>
</ul>
</div>
</template>
<script>
export
default
{
props: {
value: {
// 必須要使用value
default
: '
',
},
},
methods: {
fn2 () {
this.$emit('
input',
this
.value+2)
// 這兒必須用input 發送數據，發送的數據會被父級v-model=“test”接受到，再被value=test傳回來。
}
}
}
|
一般雙向綁定用v-model寫法一。
總結
以上所述是小編給大家介紹的vue 自定義組件 v-model雙向綁定、 父子組件同步通信的多種寫法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！