Comments (1)
自定义事件
事件名
v-on
事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的),所以v-on:myEvent
将会变成v-on:myevent
——导致myEvent
不可能被监听到。
因此,我们推荐你始终使用 kebab-case 的事件名。
将原生事件绑定到组件
Vue 提供了一个 $listeners property,它是一个对象,里面包含了作用在这个组件上的所有监听器。例如:
{
focus: function (event) { /* ... */ }
input: function (value) { /* ... */ },
}
有了这个 $listeners property,你就可以配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素,例如:
Vue.component('base-input', {
inheritAttrs: false,
props: ['label', 'value'],
computed: {
inputListeners: function () {
var vm = this
// `Object.assign` 将所有的对象合并为一个新对象
return Object.assign({},
// 我们从父级添加所有的监听器
this.$listeners,
// 然后我们添加自定义监听器,
// 或覆写一些监听器的行为
{
// 这里确保组件配合 `v-model` 的工作
input: function (event) {
vm.$emit('input', event.target.value)
}
}
)
}
},
template: `
<label>
{{ label }}
<input
v-bind="$attrs"
v-bind:value="value"
v-on="inputListeners"
>
</label>
`
})
现在 组件是一个完全透明的包裹器了,也就是说它可以完全像一个普通的 元素一样使用了:所有跟它相同的 attribute 和监听器都可以工作.
-----------------------------------
注意
以下适用于 Vue2.xx,在 Vue3.xx 里,用 v-model
替代
Vue 组件选项之 model
允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。
上面的话什么意思呢,比如在一个自定义组件上使用 v-model
:
<my-input v-model="num"></my-input>
上面的写法等价于:
<my-input :value="num" @input="(val)=> num = val"></my-input>
可以看出,在自定义组件上使用 v-model
就默认了组件的 props
有一个 value
属性(需要在组件里的 props
手动加上)和一个 input
事件(要在组件里手动通过 $emit
来触发该事件);这就默认占用了组件 props
里的 value
这个命名空间,但如果想要改变这个默认的命名空间,就可以在定义组件时使用 model
:
....
<script>
export default {
model: {
prop: 'parentValue',
event: 'parentInput'
},
props: {
value: Number,
parentValue: Number
},
....
}
</script>
这样,就可以把默认占用的 prop value
改为了 parentValue
,把默认的事件 input
改为了 parentInput
,这样你就可以使用 value
这个 prop 来干其他事情了。现在在一个自定义组件上使用 v-model
:
<my-input v-model="num" :value="otherProp"></my-input>
等价于:
<my-input :parentValue="num" @parentInput="(val)=> num = val" :value="otherProp"></my-input>
启示
默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event
根据以上描述,也可以把 v-model 用于不限于表单元素上,以实现跟 .sync
同样的功能
----------------------------------------------
.sync
修饰符
<text-document v-bind:title.sync="doc.title"></text-document>
等价于
<text-document
v-bind:title="doc.title"
v-on:update:title="doc.title = $event"
></text-document>
在组件里要用 this.$emit('update:title', newTitle)
来触发父组件数据的更新
注意
- 带有
.sync
修饰符的v-bind
不能和表达式一起使用; - 假设 doc 是一个包含 title 和 content 属性的对象,使用
v-bind.sync="doc"
会把 doc 里的每一个 property (如 title) 都作为一个独立的 prop 传进去,然后各自添加用于更新的 v-on 监听器。
from blog.
Related Issues (20)
- DOMContentLoaded 与 load、defer 与 async
- vue-cli使用相关 HOT 2
- webpack相关
- Node相关
- Vue styleguidist相关
- standard-version:版本控制、生成 changelog、打 tag
- element 和 mouseEvent 的位置和尺寸信息相关
- 用class+ts编写vue组件:vue-property-decorator相关
- 尾调用优化:尾递归优化
- 严格模式、替代 eval 的 Function
- TypeScript的模块解析逻辑(类似Node)
- 全屏H5时兼容刘海屏
- css坑!height 使用百分比单位时注意
- in 和 hasOwnProperty
- MutationObserver:监听DOM变化事件(插入、删除、变更等)的观测器
- eject啥意思
- babel插件
- node笔记-全局对象和全局变量
- 动画的12项基本法则
- Git-flow
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from blog.