vue使用技巧

透传

1. 透传props

<child-component v-bind="$props"></child-component>

2. 透传attrs

<child-component v-bind="$attrs"></child-component>

3. 透传object

<child-component v-bind="obj"></child-component>

4. 透传事件

<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: {}
		}
	}
}