<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>v-model在组件中的使用</title>
</head>
<body>
<div id="test">
</div>
<script>
/*
1、默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用
value prop来达到不同的目的。使用model选项可以回避这些情况产生的冲突,这个选项允许一个自定义组件在使用v-model时定制prop和event。
2、默认情况下:子接收到的prop值 = value;监听子组件触发的事件名event = input
3、model选项:
子接收到的prop值 = "自己随意定义"
监听子组件触发的事件名event = "自己随意定义"
下面的例子中组件A为默认情况下v-model使用;组件B为model选择的使用
*/
Vue.component("ComponentA", {
Vue v-model在组件中的使用和总结
最新推荐文章于 2024-04-09 14:48:57 发布