透传
- 透传props
<child-component v-bind="$props"></child-component>
- 透传attrs
<child-component v-bind="$attrs"></child-component>
- 透传object
<child-component v-bind="obj"></child-component>
- 透传事件
<child-component v-on="$listeners"></child-component>
动态指令、动态绑定
<template>
...
<my-button :[someProp]="something" @[someEvent]="handleSomeEvent()"/>
...
</template>
<script>
...
data(){
return{
...
someProp: 'p',
something: 't',
someEvent: someCondition ? "click" : "dblclick"
}
},
methods:{
handleSomeEvent(){
// do something
}
}
...
</script>
hookEvent
监听子组件或自身组件的生命周期
<List @hook:updated="handleTableUpdated"></List >
vm.$on('hooks:created', cb)
监听自身生命周期常用于需要分别在mounted中创建在beforeDestroy中销毁的时候,原来的方式不利于阅读,使用hookEvent可以优化阅读
// 修改前
mounted () {
window.addEventListener('resize', func)
},
beforeDestroy () {
window.removeEventListener('resize', func)
}
// 修改后
mounted () {
window.addEventListener('resize', func)
this.$once('hook:beforeDestroy', () => {
window.removeEventListener('resize', func)
})
}
CSS scoded 和深度作用选择器
scoded属性可以实现将样式隔离,但是有时候需要修改子组件的公共样式,以前都是新加一个style标签,现在可以使用深度作用选择器(/deep/ 或 >>>(这种方式在样式预编译器中可能报错)),这样既隔离了样式,又能修改公共样式。
.a /deep/ .b{}
// 编译后
.a[data-xxx] .b{}
JSX
v-cloak
由于有时候vue实例未创建时页面就渲染了,会导致页面闪烁,解决办法是给vue实例的根dom添加v-cloak属性
<div id="app" v-cloak></div>
// css 中
[v-cloak] {
display: none;
}
v-once和v-pre
v-pre表示该标签及其子标签为静态内容,跳过编译。v-once表示该标签及其子标签只编译一次,后面都做静态内容渲染。
<span v-pre>{{ this will not be compiled }}</span> 显示的是{{ this will not be compiled }}
<span v-once>This will never change: {{msg}}</span>
$event
有时候,绑定一个事件时需要传入其它参数,可是会导致事件自带的参数丢失,这时可以用$event
解决。
当绑定的事件是原生事件时,$event
表示事件的event对象。当绑定的事件时自定义事件时,$event
表示原生事件传递的第一个参数。
<input v-model="value1" @change="inputChange('hello', $event)">
覆写组件库里的组件的方法
import { Input } from 'element'
export default {
components: {
'el-input': {
mixins: [Input],
methods: {}
}
}
}