props 、 emit 操作
index.vue
1
2
3
4
5
6
| <p>{{ city }}</p>
<PropsEmit
:city="city"
:city-list="cityList"
@handle_city="update_city"
/>
|
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
| import PropsEmit from '@/components/PropsEmit.vue';
export default {
components: {
PropsEmit,
},
data() {
return {
city: '台北市',
cityList: [
{
id: 1,
name: '台北市',
},
{
id: 2,
name: '新北市',
},
],
};
},
methods: {
update_city(val) {
this.city = val;
},
},
};
|
PropsEmit.vue
1
2
3
4
5
6
7
8
9
10
11
| <template>
<select v-model="propsCity">
<option
v-for="item in cityList"
:key="item.id"
:value="item.name"
>
{{ item.name }}
</option>
</select>
</template>
|
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
| export default {
props: {
city: {
type: String,
default() {
return '';
},
},
cityList: {
type: Array,
default() {
return [];
},
},
},
computed: {
propsCity: {
get() {
return this.city;
},
set(val) {
this.$emit('handle_city', val);
},
},
},
};
|
一般寫法就必須在 父元件 註冊一個自定義事件 @handle_city 來給 子元件 使用 emit 呼叫 handle_city，並且是執行 handle_city 所綁定的 method，進而達成父子元件雙向綁定。
來看看 .sync 是如何操作的
.sync 操作
index.vue
1
2
3
4
5
| <p>{{ city }}</p>
<PropsSync
:city.sync="city"
:city-list.sync="cityList"
/>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| import PropsSync from '@/components/PropsSync.vue';
export default {
components: {
PropsSync,
},
data() {
return {
city: '台北市',
cityList: [
{
id: 1,
name: '台北市',
},
{
id: 2,
name: '新北市',
},
],
};
},
};
|
PropsSync.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
| <template>
<div>
<select v-model="synCity">
<option
v-for="item in cityList"
:key="item.id"
:value="item.name"
>
{{ item.name }}
</option>
</select>
</div>
</template>
|
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
| export default {
props: {
city: {
type: String,
default() {
return '';
},
},
cityList: {
type: Array,
default() {
return [];
},
},
},
computed: {
synCity: {
get() {
return this.city;
},
set(val) {
this.$emit('update:city', val);
},
},
},
};
|
由此可知，使用 .sync 就可以少寫 @handle_city="update_city" 和 methods 事件，所以 .sync 就是幫我們做了以下的事情:
1
| v-bind:city="city" v-on:update:city="city = $event”
|
參考資料
從原型鏈的角度看 -> 為什麼 Vue 組件中的 data 必須是一個 Function 函數