emits 选项
为什么要验证事件
验证抛出的事件，啥又叫抛出？
pp.component('custom-form', {
emits: {
// 没有验证
click: null,
// 验证submit 事件
submit: ({ email, password }) => {
if (email && password) {
return true
} else {
console.warn('Invalid submit event payload!')
return false
}
}
},
methods: {
submitForm(email, password) {
this.$emit('submit', { email, password })
}
}
})
就是验证邮箱账号，密码吗？？你倒是说说是这个场景啊，用一句话说一下啊。
以下代码是空白
<!DOCTYPE html>
<div>
<my-component v-model:title="bookTitle"></my-component>
</div>
</html>
<script src="https://unpkg.com/vue@next"></script>
<script>
app.component('my-component', {
props: {
title: String
},
emits: ['update:title'],
template: `
<input
type="text"
:value="title"
@input="$emit('update:title', $event.target.value)">
`
}).mount('#bookTitle')
</script>
可以改吗，应该怎么改，对吗？
也不对
<!DOCTYPE html>
<div>
<my-component v-model:title="bookTitle"></my-component>
</div>
</html>
<script src="https://unpkg.com/vue@next"></script>
<script>
app.component('my-component', {
props: {
title: String
},
emits: ['update:title'],
template: `
<input
type="text"
:value="title"
@input="$emit('update:title', $event.target.value)">
`
})
Vue.createApp(app).mount('#bookTitle')
</script>
终于有一个可以试运行的了。看了半天都没有，组件本来就不好懂，还没有例子试。
有点乱七八糟的。
<!DOCTYPE html>
<user-name
v-model:first-name="firstName"
v-model:last-name="lastName">
</user-name>
</html>
<script src="https://unpkg.com/vue@next"></script>
<script>
app.component('user-name', {
props: {
firstName: String,
lastName: String
},
emits: ['update:firstName', 'update:lastName'],
template: `
<input
type="text"
:value="firstName"
@input="$emit('update:firstName', $event.target.value)">
<input
type="text"
:value="lastName"
@input="$emit('update:lastName', $event.target.value)">
`
};
const HelloVueApp = {
components: {
UserName,
},
data() {
return {
firstName: 'John',
lastName: 'Doe',
};
},
};
Vue.createApp(HelloVueApp).mount('#model-example')
</script>
运行不出来。
运行出来了
<!DOCTYPE html>
<div id ="v-model-example">
<p>First name: {{ firstName }}</p>
<p>Last name: {{ lastName }}</p>
<user-name
v-model:first-name="firstName"
v-model:last-name="lastName">
</user-name>
</div>
</html>
<script src="https://unpkg.com/vue@next"></script>
<script>
//app.component('user-name', {
const UserName = {
props: {
firstName: String,
lastName: String
},
//emits: ['update:firstName', 'update:lastName'],
template: `
<input
type="text"
:value="firstName"
@input="$emit('update:firstName', $event.target.value)">
<input
type="text"
:value="lastName"
@input="$emit('update:lastName', $event.target.value)">
`
};
const HelloVueApp = {
components: {
UserName,
},
data() {
return {
firstName: 'John',
lastName: 'Doe',
};
},
};
Vue.createApp(HelloVueApp).mount('#v-model-example')
</script>
抄一个
第一个字母自动大写了。
<!DOCTYPE html>
<div id="app">
<my-component v-model.capitalize="myText"></my-component>
{{ myText }}
</div>
</html>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
myText: ''
}
}
})
app.component('my-component', {
props: {
modelValue: String,
modelModifiers: {
default: () => ({})
}
},
emits: ['update:modelValue'],
methods: {
emitValue(e) {
let value = e.target.value
if (this.modelModifiers.capitalize) {
value = value.charAt(0).toUpperCase() + value.slice(1)
}
this.$emit('update:modelValue', value)
}
},
template: `<input
type="text"
:value="modelValue"
@input="emitValue">`
})
app.mount('#app')
</script>
