1.vue+js 语法
1.使用 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
| <template>
<div>
<button @click="showModal">显示弹框</button>
<my-modal v-model="modalVisible"></my-modal>
</div>
</template>
<script>
import MyModal from './MyModal.vue';
export default {
components: {
'my-modal': MyModal,
},
data() {
return {
modalVisible: false,
};
},
methods: {
showModal() {
this.modalVisible = true;
},
},
};
</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
| <template>
<a-modal :visible="visible" destroyOnClose width="60%" @cancel="handleCancel" title="标题" @ok="handleOk"></a-modal>
</template>
<script>
export default {
props: {
visible: {
type: Boolean,
default: false,
},
},
model: {
prop: 'visible',
event: 'update:visible',
},
methods: {
handleCancel() {
this.$emit('update:visible', false);
},
handleOk() {
this.$emit('update:visible', false);
},
},
};
</script>
|
2.使用:visible:sync
使用:visible.sync来实现父子组件之间的双向绑定，那么在子组件中的代码就不需要props和$emit来实现父子组件之间的通信了，可以简化为以下代码：
父组件
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
| <template>
<div>
<button @click="showModal">显示弹框</button>
<my-modal :visible.sync="modalVisible"></my-modal>
</div>
</template>
<script>
import MyModal from './MyModal.vue';
export default {
components: {
MyModal,
},
data() {
return {
modalVisible: false,
};
},
methods: {
showModal() {
this.modalVisible = true;
},
},
};
</script>
|
子组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <template>
<a-modal :visible="visible" destroyOnClose width="60%" @cancel="handleCancel" title="标题" @ok="handleOk"></a-modal>
</template>
<script>
export default {
props: {
visible: {
type: Boolean,
default: false,
},
},
methods: {
handleOk() {
this.$emit('update:visible', false);
},
handleCancel() {
this.$emit('update:visible', false);
},
},
};
</script>
|
在这个示例中，我们不需要使用model来定义父子组件之间的双向绑定，而是直接将父组件中的modalVisible属性通过:visible.sync绑定到子组件的visible属性上。在子组件中，我们在handleOk和handleCancel方法中，通过$emit(‘update:visible’, false)来更新父组件中的modalVisible属性的值。这样就能够实现父子组件之间的双向绑定了。
2.vue+ts 语法
父组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <template>
<my-modal :visible.sync="modalVisible"></my-modal>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import MyModal from './MyModal.vue';
@Component
export default class MyComponent extends Vue {
modalVisible = false;
showModal() {
this.modalVisible = true;
}
}
</script>
|
子组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <template>
<a-modal :visible="visible" destroyOnClose width="60%" @cancel="handleCancel" title="标题" @ok="handleOk"></a-modal>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class MyModal extends Vue {
@Prop({ type: Boolean, default: false })
visible!: boolean;
handleOk() {
this.$emit('update:visible', false);
}
handleCancel() {
this.$emit('update:visible', false);
}
}
</script>
|
3.vue3
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
42
43
44
45
46
47
| <template>
<van-dialog v-model:show="porps_show" title="执行自愈" show-cancel-button :beforeClose="beforeClose">
<van-form ref="ruleForm"></van-form>
</van-dialog>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, computed } from 'vue';
export default defineComponent({
components: {},
props: {
show: {
type: Boolean,
default: false,
},
},
setup(props: any, context) {
const porps_show = computed({
get: () => props.show,
set: value => {
context.emit('updateSoluteVisible', value);
},
});
const state = reactive({});
onMounted(() => {});
const methods = reactive({
beforeClose(action: string) {
return new Promise(resolve => {
if (action === 'confirm') {
resolve(false);
} else {
resolve(true);
}
});
},
});
return {
...toRefs(state),
...toRefs(methods),
porps_show,
};
},
});
</script>
|
