vue使用技巧

透传
  1. 透传props
<child-component v-bind="$props"></child-component>
  1. 透传attrs
<child-component v-bind="$attrs"></child-component>
  1. 透传object
<child-component v-bind="obj"></child-component>
  1. 透传事件
<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: {}
		}
	}
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值